This content originally appeared on Go Make Things and was authored by Go Make Things
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!
Click here to read the whole thing.
I have a favor to ask. If you enjoyed this article, could you share a link to my newsletter on your favorite social media site?
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2022-12-22T14:30:00+00:00) The FormData API. Retrieved from https://www.scien.cx/2022/12/22/the-formdata-api/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.