Escuchar eventos de envío de formularios en JavaScript sin modificar HTML

En este artículo, abordamos el desafío común de escuchar eventos de envío de formularios sin tener que modificar el código HTML. En lugar de depender de los atributos onClick o onSubmit en HTML, proporcionamos una solución JavaScript pura.

Para lograr esto, aprovechamos el método EventTarget.addEventListener. Este método nos permite registrar una función de devolución de llamada que se ejecutará cuando ocurra un evento específico en un elemento de formulario.

var ele = /*Your Form Element*/;
if (ele.addEventListener) {
  ele.addEventListener("submit", callback, false); // Modern browsers
} else if (ele.attachEvent) {
  ele.attachEvent('onsubmit', callback); // Old IE
}

Reemplace "ele" con la referencia a su elemento de formulario y "callback" con la función que desea ejecutar cuando se envía el formulario.

Para evitar el comportamiento de envío del formulario nativo (es decir, , actualizando la página), use el método .preventDefault() dentro de su función de devolución de llamada:

document.querySelector("#myForm").addEventListener("submit", function (e) {
  if (!isValid) {
    e.preventDefault(); // Stop form from submitting
  }
});

Escuchar eventos de envío con bibliotecas

Aunque no es necesario, es posible que prefieras usar una biblioteca para escuchar los eventos de envío. Así es como puedes hacerlo usando bibliotecas comunes:

jQuery

$(ele).submit(callback);

Ejemplo

[jsfiddle.net/DerekL/wnbo1hq0/show](http://jsfiddle.net/DerekL/wnbo1hq0/show)

Al utilizar estas técnicas, puede Escuche fácilmente los eventos de envío de formularios en JavaScript sin tener que tocar el código HTML.