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 ⁨September 2021⁩.

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

Dieses Ereignis kann nicht abgebrochen werden und breitet sich nicht aus.

Syntax

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

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

onformdata = (event) => { }

Ereignistyp

Ein FormDataEvent. Erbt von Event.

Ereigniseigenschaften

Erbt Eigenschaften von seiner Elternschnittstelle, Event.

FormDataEvent.formData: Enthält das FormData Objekt, das die im Formular enthaltenen Daten repräsentiert, als das Ereignis ausgelöst wurde.

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(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 folgendermaßen aussehen:

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 # event-formdata

Browser-Kompatibilität

Siehe auch

HTML <form> Element
FormDataEvent

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden