HTMLFormElement: formdata Ereignis

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.

Das formdata Ereignis wird ausgelöst, nachdem die Eintragsliste, die die Daten des Formulars darstellt, erstellt wurde. Dies geschieht, wenn das Formular übermittelt wird, kann jedoch auch durch den Aufruf eines FormData() Konstruktors ausgelöst werden.

Dieses Ereignis kann nicht abgebrochen werden und es verbreitet sich nicht weiter.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

js
addEventListener("formdata", (event) => {});

onformdata = (event) => {};

Ereignistyp

Ein FormDataEvent. Erbt von Event.

Event FormDataEvent

Ereigniseigenschaften

Erbt Eigenschaften von seiner Elternschnittstelle, Event.

FormDataEvent.formData

Enthält das FormData Objekt, das die im Formular enthaltenen Daten darstellt, als das Ereignis ausgelöst wurde.

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(formElem.querySelector('input[name="field1"]')); // FOO
  console.log(formElem.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 gets modified by the formdata event
  formData.set("field1", formData.get("field1").toLowerCase());
  formData.set("field2", formData.get("field2").toLowerCase());
});

Die onformdata Version würde so aussehen:

js
formElem.onformdata = (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 Standard
# event-formdata

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch