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
FormDataObjekt, 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
Loading…
Siehe auch
- HTML
<form>Element FormDataEvent