FormDataEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Event FormDataEvent

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

js
// 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
# the-formdataevent-interface

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
FormDataEvent
FormDataEvent() constructor
formData

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch