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.
Das FormDataEvent-Interface repräsentiert ein formdata-Ereignis. Ein solches Ereignis wird für ein HTMLFormElement-Objekt ausgelöst, nachdem die Eintragsliste mit den Formulardaten erstellt wurde. Dies geschieht beim Absenden des Formulars, kann aber auch durch den Aufruf eines FormData()-Konstruktors ausgelöst werden.
So lässt sich als Reaktion auf ein formdata-Ereignis schnell ein FormData-Objekt abrufen. Sie müssen es dann nicht selbst zusammenstellen, wenn Sie Formulardaten über eine Methode wie fetch() senden möchten (siehe FormData-Objekte verwenden).
Konstruktor
FormDataEvent()-
Erstellt eine neue Instanz eines
FormDataEvent-Objekts.
Instanzeigenschaften
Erbt Eigenschaften vom übergeordneten Interface Event.
FormDataEvent.formDataSchreibgeschützt-
Enthält das
FormData-Objekt, das die beim Auslösen des Ereignisses im Formular enthaltenen Daten repräsentiert.
Instanzmethoden
Erbt Methoden vom übergeordneten Interface 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 |