HTMLFormElement: formdata-Ereignis
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
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 ist nicht abbrechbar und wird nicht weitergeleitet.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("formdata", (event) => { })
onformdata = (event) => { }
Ereignistyp
Ein FormDataEvent. Erbt von Event.
Ereigniseigenschaften
Erbt Eigenschaften von seiner Elternschnittstelle, Event.
FormDataEvent.formData-
Enthält das
FormData-Objekt, 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 so 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
| Specification |
|---|
| HTML # event-formdata |
Browser-Kompatibilität
Loading…
Siehe auch
- HTML
<form>Element FormDataEvent