Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
FormDataEvent
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.
DieFormDataEvent-Schnittstelle repräsentiert einformdata-Ereignis – ein solches Ereignis wird auf einemHTMLFormElement-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 einesFormData()-Konstruktors ausgelöst werden.
Dies ermöglicht es, einFormData-Objekt schnell als Antwort auf einformdata-Ereignis zu erhalten, anstatt es selbst zusammenzustellen, wenn Sie Formulardaten über eine Methode wiefetch() übermitteln möchten (sieheVerwendung von FormData-Objekten).
Konstruktor
FormDataEvent()Erstellt eine neue Instanz eines
FormDataEvent-Objekts.
Instanzeigenschaften
Erbt Eigenschaften von der übergeordneten SchnittstelleEvent.
FormDataEvent.formDataEnthält das
FormData-Objekt, das die im Formular enthaltenen Daten darstellt, als das Ereignis ausgelöst wurde.
Instanzmethoden
Erbt Methoden von der übergeordneten SchnittstelleEvent.
Beispiele
// grab reference to formconst formElem = document.querySelector("form");// submit handlerformElem.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 dataformElem.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 # the-formdataevent-interface |