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 servidos (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></title>

<script type="text/javascript">

    window.addEventListener('load', inicio, false);

    function inicio() {
        document.getElementById("formulario1").addEventListener('submit', validar, false);
    }

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

</script>

</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>

</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 load de la página indicando que se ejecute la función inicio donde registramos el evento submit del formulario:

    window.addEventListener('load', inicio, false);

    function inicio() {
        document.getElementById("formulario1").addEventListener('submit', validar, false);
    }

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) {
        var cla1 = document.getElementById("clave1").value;
        var cla2 = document.getElementById("clave2").value;
        if (cla1!=cla2) {
            alert('Las claves ingresadas son distintas');
            evt.preventDefault();
        }
    }

Retornar