HTMLFormElement : événement formdata

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨septembre 2021⁩.

L'évènementformdata de l'interfaceHTMLFormElement se déclenche après que la liste des entrées représentant les données du formulaire a été construite. Cela se produit lors de la soumission du formulaire, mais peut aussi être déclenché par l'appel du constructeurFormData().

Cet évènement n'est pas annulable et ne se propage pas.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes commeaddEventListener() ou affectez une propriété gestionnaire d'évènement.

addEventListener("formdata", (event) => { })onformdata = (event) => { }

Type d'évènement

Un objetFormDataEvent. Hérite deEvent.

Propriétés de l'évènement

Hérite des propriétés de son interface parente,Event.

FormDataEvent.formData: Contient l'objetFormData représentant les données présentes dans le formulaire au moment du déclenchement de l'évènement.

Exemples

// récupérer la référence du formulaireconst formElem = document.querySelector("form");// gestionnaire de soumissionformElem.addEventListener("submit", (e) => {  // lors de la soumission du formulaire, empêcher l'action par défaut  e.preventDefault();  console.log(formElem.querySelector('input[name="field1"]')); // TOTO  console.log(formElem.querySelector('input[name="field2"]')); // TATA  // construire un objet FormData, ce qui déclenche l'évènement formdata  const formData = new FormData(formElem);  // l'objet FormData est modifié par l'évènement formdata  console.log(formData.get("field1")); // toto  console.log(formData.get("field2")); // tata});// gestionnaire formdata pour récupérer les donnéesformElem.addEventListener("formdata", (e) => {  console.log("évènement formdata déclenché");  // modifie les données du formulaire  const formData = e.formData;  // l'objet FormData est modifié par l'évènement formdata  formData.set("field1", formData.get("field1").toLowerCase());  formData.set("field2", formData.get("field2").toLowerCase());});

La versiononformdata ressemble à ceci :

formElem.onformdata = (e) => {  console.log("évènement formdata déclenché");  // modifie les données du formulaire  const formData = e.formData;  formData.set("field1", formData.get("field1").toLowerCase());  formData.set("field2", formData.get("field2").toLowerCase());};