FormDataEvent
The FormDataEvent
interface represents a formdata
event — such an event is fired on an 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 FormData()
constructor.
This allows a 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 XMLHttpRequest
(see Using FormData objects).
Constructor
FormDataEvent()
-
Creates a new
FormDataEvent
object instance.
Instance properties
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.
Instance methods
Inherits methods from its parent interface, Event
.
Examples
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(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
Specification |
---|
HTML Standard # the-formdataevent-interface |
Browser compatibility
BCD tables only load in the browser