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.
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> |