Listado completo de tutoriales

Evento: submit

Todo formulario se le puede capturar el evento submit que se dispara previo a enviar los datos del formulario al servidor.

Uno de los usos más extendidos es la de validar los datos ingresados al formulario y abortar el envío de los mismos al servidor (con esto liberamos sobrecargas del servidor)

El evento submit se dispara cuando presionamos un botón de tipo type="submit".

Para probar el funcionamiento del evento submit implementaremos un formulario que solicita la carga de una clave y la repetición de la misma. Luego cuando se presione un botón de tipo "submit" verificaremos que las dos claves ingresadas sean iguales.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <form method="post" action="procesar.php" id="formulario1">
        Ingrese clave:
        <input type="password" id="clave1" name="clave1" size="20" required>
        <br> Repita clave:
        <input type="password" id="clave2" name="clave2" size="20" required>
        <br>
        <input type="submit" id="confirmar" name="confirmar" value="Confirmar">
    </form>

    <script>
        document.getElementById("formulario1").addEventListener('submit', validar);

        function validar(evt) {
            let cla1 = document.getElementById("clave1").value;
            let cla2 = document.getElementById("clave2").value;
            if (cla1 != cla2) {
                alert('Las claves ingresadas son distintas');
                evt.preventDefault();
            }
        }
    </script>

</body>

</html>

Tengamos en cuenta que la primer línea indica que se trata de una página de HTML5:

<!doctype html>

Definimos un formulario que solicita la carga de dos claves y un botón submit para enviar los datos al servidor:

<form method="post" action="procesar.php" id="formulario1">
Ingrese clave:
<input type="password" id="clave1" name="clave1" size="20" required>
<br>
Repita clave:
<input type="password" id="clave2" name="clave2" size="20" required>
<br>
<input type="submit" id="confirmar" name="confirmar" value="Confirmar">
</form>

Registramos el evento submit del formulario:

        document.getElementById("formulario1").addEventListener('submit', validar);

La función validar extrae los contenidos de los dos "password" y verificamos si tienen string distintos en cuyo caso llamando al método preventDefault del objeto que llega como parámetro, lo cual previene que los datos se envíen al servidor:

        function validar(evt) {
            let cla1 = document.getElementById("clave1").value;
            let cla2 = document.getElementById("clave2").value;
            if (cla1 != cla2) {
                alert('Las claves ingresadas son distintas');
                evt.preventDefault();
            }
        }

Retornar