Écouter les événements de soumission de formulaire en JavaScript sans modifier le HTML

Dans cet article, nous abordons le défi courant de l'écoute des événements de soumission de formulaire sans devoir modifier le code HTML. Au lieu de nous appuyer sur les attributs onClick ou onSubmit en HTML, nous proposons une solution JavaScript pure.

Pour y parvenir, nous exploitons la méthode EventTarget.addEventListener. Cette méthode nous permet d'enregistrer une fonction de rappel qui sera exécutée lorsqu'un événement spécifique se produit sur un élément de formulaire.

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
}

Remplacez "ele" par la référence à votre élément de formulaire et "callback" par la fonction que vous souhaitez exécuter lorsque le formulaire est soumis.

Pour empêcher le comportement natif de soumission du formulaire (c.-à-d. , actualisant la page), utilisez la méthode .preventDefault() dans votre rappel function:

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

Écouter pour soumettre des événements avec des bibliothèques

Bien que cela ne soit pas nécessaire, vous préférerez peut-être utiliser une bibliothèque pour écouter et soumettre des événements. Voici comment procéder en utilisant Common bibliothèques :

jQuery

$(ele).submit(callback);

Exemple

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

Par en utilisant ces techniques, vous pouvez facilement écouter les événements de soumission de formulaire en JavaScript sans avoir à toucher au code HTML.