Last week, we looked at how to serialize form data into an array in vanilla JS. Today, we'll do something really similar: we'll learn how to put the data into an object instead of an array.

Because it's so similar, I'll just show you the complete function:

* Serialize all form data into an object
* @param {HTMLFormElement} form The form to serialize
* @returns {Object} The serialized form data

function serializeObject (form) {
// Create a new FormData object
const formData = new FormData(form);

// Create an object to hold the name/value pairs
const pairs = {};

// Add each name/value pair to the object
for (const [name, value] of formData) {
pairs[name] = value;

// Return the object
return pairs;

The only difference is that we:

  1. Created an object literal instead of an array literal; and
  2. Set properties on the object instead of pushing elements into an array.

As with last week's helper function, this solution makes use of several ES6 features including the const keyword, a for...of loop, and destructuring assignment. It should work in all modern browsers, but not IE. It's available under the MIT license, so feel free to use it in your own projects: serializeObject.js.

If you need better browser support, my friend Chris Ferdinandi has an alternative version that should work back to IE9.

View the demo on CodePen