title | slug | page-type | browser-compat |
---|---|---|---|
FormDataEvent |
Web/API/FormDataEvent |
web-api-interface |
api.FormDataEvent |
{{APIRef("DOM")}}
The FormDataEvent
interface represents a formdata
event — such an event is fired on an {{domxref("HTMLFormElement")}} object after the entry list representing the form's data is constructed. This happens when the form is submitted, but can also be triggered by the invocation of a {{domxref("FormData.FormData", "FormData()")}} constructor.
This allows a {{domxref("FormData")}} object to be quickly obtained in response to a formdata
event firing, rather than needing to put it together yourself when you wish to submit form data via a method like {{domxref("fetch()")}} (see Using FormData objects).
{{InheritanceDiagram}}
- {{domxref("FormDataEvent.FormDataEvent","FormDataEvent()")}}
- : Creates a new
FormDataEvent
object instance.
- : Creates a new
Inherits properties from its parent interface, {{domxref("Event")}}.
- {{domxref("FormDataEvent.formData")}}
- : Contains the {{domxref("FormData")}} object representing the data contained in the form when the event was fired.
Inherits methods from its parent interface, {{domxref("Event")}}.
// 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());
});
{{Specifications}}
{{Compat}}
- {{domxref("fetch()")}}
- {{domxref("FormData")}}
- Using FormData objects
- {{HTMLElement("Form")}}