HTMLFormElement: formdata Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2021 browserübergreifend verfügbar.
Das formdata Ereignis wird ausgelöst, nachdem die Eintragsliste, die die Daten des Formulars darstellt, erstellt wurde. Dies geschieht, wenn das Formular abgeschickt wird, kann aber auch durch den Aufruf eines FormData() Konstruktors ausgelöst werden.
Dieses Ereignis kann nicht abgebrochen werden und breitet sich nicht aus.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("formdata", (event) => { })
onformdata = (event) => { }
Ereignistyp
Ein FormDataEvent. Erbt von Event.
Ereigniseigenschaften
Erbt Eigenschaften von seiner Elternschnittstelle, Event.
FormDataEvent.formData-
Enthält das
FormDataObjekt, das die im Formular enthaltenen Daten repräsentiert, als das Ereignis ausgelöst wurde.
Beispiele
// grab reference to form
const formElem = document.querySelector("form");
// submit handler
formElem.addEventListener("submit", (e) => {
// on form submission, prevent default
e.preventDefault();
console.log(formElem.querySelector('input[name="field1"]')); // FOO
console.log(formElem.querySelector('input[name="field2"]')); // BAR
// construct a FormData object, which fires the formdata event
const formData = new FormData(formElem);
// formdata gets modified by the formdata event
console.log(formData.get("field1")); // foo
console.log(formData.get("field2")); // bar
});
// formdata handler to retrieve data
formElem.addEventListener("formdata", (e) => {
console.log("formdata fired");
// modifies the form data
const formData = e.formData;
// formdata gets modified by the formdata event
formData.set("field1", formData.get("field1").toLowerCase());
formData.set("field2", formData.get("field2").toLowerCase());
});
Die onformdata Version würde folgendermaßen aussehen:
formElem.onformdata = (e) => {
console.log("formdata fired");
// modifies the form data
const formData = e.formData;
formData.set("field1", formData.get("field1").toLowerCase());
formData.set("field2", formData.get("field2").toLowerCase());
};
Spezifikationen
| Spezifikation |
|---|
| HTML # event-formdata |
Browser-Kompatibilität
Siehe auch
- HTML
<form>Element FormDataEvent