This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
The formData read-only property of the FormDataEvent interface contains the FormData object representing the data contained in the form when the event was fired.
A FormData object.
// grab reference to form
const formElem = document.querySelector("form");
// submit handler
formElem.addEventListener("submit", (e) => {
// on form submission, prevent default
e.preventDefault();
// construct a FormData object, which fires the formdata event
new FormData(formElem);
});
// formdata handler to retrieve data
formElem.addEventListener("formdata", (e) => {
console.log("formdata fired");
// Get the form data from the event object
let data = e.formData;
for (const value of data.values()) {
console.log(value);
}
// submit the data via XHR
const request = new XMLHttpRequest();
request.open("POST", "/formHandler");
request.send(data);
});
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
formData |
77 | 79 | 72 | 64 | 15 | 77 | 79 | 55 | 15 | 12.0 | 77 | 15 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/FormDataEvent/formData