Javascript formdata Event for Forms

The formdata event is fired for a <form> element when its form data is constructed. Typically this will be fired when the form is submitted, but it is also fired when a new FormData object is created.

document.querySelector("#test-form").addEventListener('submit', function(e) {
	e.preventDefault();

	// new FormData object for current form
	// will trigger formdata event
	new FormData(this);
});

document.querySelector("#test-form").addEventListener('formdata', function(e) {
	// refers to the FormData object
	var form_data = e.formData;

	// send AJAX request using form data
});

This event is a part of the Form Participation API. Conventionally only form elements can participate in form submission. But this API can also enable Javascript objects, which in turn enable custom input elements to be included during AJAX form submission.

Browser Compatibility

Tutorials & Resources

• Using formdata Event for AJAX Form Submissions