The FormData API
Historically, getting all of the data from a form into a single object was a bit difficult, but modern techniques make it a lot easier.
The FormData
object provides an easy way to serialize form fields into key/value pairs.
I recently wrote about this for Steph Eckles’ amazing 12 Days of Web series, and today, wanted to give you a little preview.
How the FormData API works
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);
Looping through FormData values
The FormData
object is an iterable.
You can loop through it using a for...of
loop. Each entry is an array of key/value pairs.
// logs...
// ["title", "Go to the beach"]
// ["body", "Soak up the sun and swim in the ocean."]
// ["userId", "1"]
for (let entry of data) {
console.log(entry);
}
You can also use array destructuring to assign the key and value to their own variables within the for...of
loop.
// logs "title", "Go to the beach", etc.
for (let [key, value] of data) {
console.log(key);
console.log(value);
}
How to get, set, and serialize values (and more!)
In my article on 12 Days, I go into a lot more detail about the nitty-gritty of working with the FormData API. Many thanks to Steph for letting me participate in this year’s series!