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.
General info
Bubbles | No |
---|---|
Cancelable | No |
Interface | FormDataEvent |
Event handler property | GlobalEventHandlers.onformdata |
Examples
// 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 (var value of data.values()) { console.log(value); } // submit the data via XHR var request = new XMLHttpRequest(); request.open("POST", "/formHandler"); request.send(data); });
The onformdata
version would look like this:
formElem.onformdata = (e) => { console.log('formdata fired'); // Get the form data from the event object let data = e.formData; for (var value of data.values()) { console.log(value); } // submit the data via XHR var request = new XMLHttpRequest(); request.open("POST", "/formHandler"); request.send(data); };
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'formdata' in that specification. |
Unknown |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
formdata event | Chrome Full support 77 | Edge Full support 79 | Firefox Full support 72 | IE No support No | Opera Full support 64 | Safari No support No | WebView Android Full support 77 | Chrome Android Full support 77 | Firefox Android No support No | Opera Android Full support 55 | Safari iOS No support No | Samsung Internet Android Full support 12.0 |
Legend
- Full support
- Full support
- No support
- No support
See also
- HTML
<form>
element FormDataEvent