Web/API/FormDataEvent

The FormDataEvent interface represents a formdata event — such an event is fired on an HTMLFormElement object 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.

This allows a FormData object to be quickly obtained in response to a formdata event firing, rather than needing to put it together yourself when you wish to submit form data via a method like XMLHttpRequest (see Using FormData objects).

Constructor

FormDataEvent(): Creates a new FormDataEvent object instance.

Properties

Inherits properties from its parent interface, Event.

FormDataEvent.formData: Contains the FormData object representing the data contained in the form when the event was fired.

Methods

Inherits methods from its parent interface, Event.

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);
});

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'FormDataEvent' in that specification.	Living Standard

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`FormDataEvent`	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
`FormDataEvent()` constructor	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
`formData`	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