FormDataEvent
Die FormDataEvent
-Schnittstelle repräsentiert ein formdata
-Ereignis – ein solches Ereignis wird auf einem HTMLFormElement
-Objekt ausgelöst, nachdem die Eintragsliste, die die Formulardaten darstellt, erstellt wurde. Dies geschieht, wenn das Formular abgeschickt wird, kann aber auch durch den Aufruf eines FormData()
-Konstruktors ausgelöst werden.
Dies ermöglicht es, ein FormData
-Objekt schnell als Antwort auf ein formdata
-Ereignis zu erhalten, anstatt es selbst zusammenzustellen, wenn Sie Formulardaten über eine Methode wie fetch()
übermitteln möchten (siehe Verwendung von FormData-Objekten).
Konstruktor
FormDataEvent()
-
Erstellt eine neue Instanz eines
FormDataEvent
-Objekts.
Instanzeigenschaften
Erbt Eigenschaften von der übergeordneten Schnittstelle Event
.
FormDataEvent.formData
-
Enthält das
FormData
-Objekt, das die im Formular enthaltenen Daten darstellt, als das Ereignis ausgelöst wurde.
Instanzmethoden
Erbt Methoden von der übergeordneten Schnittstelle Event
.
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(form.querySelector('input[name="field1"]')); // FOO
console.log(form.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.set("field1", formData.get("field1").toLowerCase());
formData.set("field2", formData.get("field2").toLowerCase());
});
Spezifikationen
Specification |
---|
HTML Standard # the-formdataevent-interface |
Browser-Kompatibilität
BCD tables only load in the browser