FormDataEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨September 2021⁩.

TheFormDataEvent interface represents aformdata event — such an event is fired on anHTMLFormElement 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 aFormData() constructor.

This allows aFormData object to be quickly obtained in response to aformdata event firing, rather than needing to put it together yourself when you wish to submit form data via a method likefetch() (seeUsing FormData objects).

Constructor

FormDataEvent(): Creates a newFormDataEvent object instance.

Instance properties

Inherits properties from its parent interface,Event.

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

Instance methods

Inherits methods from its parent interface,Event.

Examples

// grab reference to formconst formElem = document.querySelector("form");// submit handlerformElem.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 dataformElem.addEventListener("formdata", (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());});