HTMLFormElement: formdata event

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⁩.

Theformdata 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 aFormData() constructor.

This event is not cancelable and does not bubble.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("formdata", (event) => { })onformdata = (event) => { }

Event type

AFormDataEvent. Inherits fromEvent.

Event 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.

Examples

// grab reference to formconst formElem = document.querySelector("form");// submit handlerformElem.addEventListener("submit", (e) => {  // on form submission, prevent default  e.preventDefault();  console.log(formElem.querySelector('input[name="field1"]')); // FOO  console.log(formElem.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 gets modified by the formdata event  formData.set("field1", formData.get("field1").toLowerCase());  formData.set("field2", formData.get("field2").toLowerCase());});

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