Skip to main content Accessibility Feedback
  • FormData
  • Last updated on

new FormData()

The FormData object provides an easy way to serialize form fields into key/value pairs.

You can use the new FormData() constructor to create a new FormData object, passing in the form to serialize as an argument.

For example, let’s imagine you have a form that looks like this.

<form>

	<label for="title">Title</label>
	<input type="text" name="title" id="title" value="Go to the beach">

	<label for="body">Body</label>
	<textarea id="body" name="body">Soak up the sun and swim in the ocean.</textarea>

	<input type="hidden" name="userId" value="1">

	<button>Submit</button>

</form>

Important! Form fields must have a name attribute to be included in the object. Otherwise, they’re skipped. The id property doesn’t count.

To create a FormData object, you would pass the form into the new FormData() constructor, like this.

// Get the form
let form = document.querySelector('form');

// Get all field data from the form
// returns a FormData object
let data = new FormData(form);

Source Code