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