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ènement formdata de l'interface HTMLFormElement 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 constructeur FormData().
Cet évènement n'est pas annulable et ne se propage pas.
Syntaxe
Utilisez le nom de l'évènement dans des méthodes comme addEventListener() ou affectez une propriété gestionnaire d'évènement.
addEventListener("formdata", (event) => { }) onformdata = (event) => { } Type d'évènement
Un objet FormDataEvent. Hérite de Event.
Propriétés de l'évènement
Hérite des propriétés de son interface parente, Event.
FormDataEvent.formData-
Contient l'objet
FormDatarepré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 formulaire const formElem = document.querySelector("form"); // gestionnaire de soumission formElem.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ées formElem.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 version onformdata 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()); }; Spécifications
| Specification |
|---|
| HTML # event-formdata |
Compatibilité des navigateurs
Voir aussi
- L'élément HTML
<form> - L'interface
FormDataEvent