The formdata
event fires 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 FormData()
constructor.
This event is not cancelable and does not bubble.
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("formdata", (event) => {});
onformdata = (event) => {};
Inherits properties from its parent interface, Event
.
FormDataEvent.formData
-
Contains the FormData
object representing the data contained in the form when the event was fired.
const formElem = document.querySelector("form");
formElem.addEventListener("submit", (e) => {
e.preventDefault();
console.log(formElem.querySelector('input[name="field1"]'));
console.log(formElem.querySelector('input[name="field2"]'));
const formData = new FormData(formElem);
console.log(formData.get("field1"));
console.log(formData.get("field2"));
});
formElem.addEventListener("formdata", (e) => {
console.log("formdata fired");
const formData = e.formData;
formData.set("field1", formData.get("field1").toLowerCase());
formData.set("field2", formData.get("field2").toLowerCase());
});
The onformdata
version would look like this:
formElem.onformdata = (e) => {
console.log("formdata fired");
const formData = e.formData;
formData.set("field1", formData.get("field1").toLowerCase());
formData.set("field2", formData.get("field2").toLowerCase());
};