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

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

Dans cet article, nous abordons le défi courant consistant à écouter les é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 purement JavaScript.

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.

<code class="javascript">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
}</code>

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 de soumission du formulaire natif (c'est-à-dire actualiser la page), utilisez la méthode .preventDefault() dans votre fonction de rappel :

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

É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 les bibliothèques communes :

jQuery

<code class="javascript">$(ele).submit(callback);</code>

Exemple

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!