HTMLFormElement: formdata event
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
BCD tables only load in the browser
See also
- HTML
<form>
element FormDataEvent