Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
FormDataEvent
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.
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
| Spezifikation |
|---|
| HTML # the-formdataevent-interface |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.