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.
HTMLFormElement: formdata event
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(); 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 gets modified by the formdata event 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'); // 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 # event-formdata |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
formdata_event |
77
|
79
|
72
|
No
|
64
|
15
|
77
|
77
|
No
|
55
|
15
|
12.0
|
See also
- HTML
<form>
element FormDataEvent
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event