Skip to main content Accessibility Feedback

serialize.js

Serialize all form data into an object. Fields must have a name property.

Source Code

Example

HTML
<form class="save-me" id="save-me">

	<label for="name">Name</label>
	<input type="text" name="name" id="name" value="Mike Wazowski">

	<label for="address">Address</label>
	<input type="text" name="address" id="address" value="123 Scare Avenue, Monstropolis">

	<label for="email">Email</label>
	<input type="email" name="email" id="email" value="mikew@monstersinc.com">

	<label for="hear-about-us">How did you hear about us?</label>
	<select name="hear-about-us" id="hear-about-us">
		<option value=""></option>
		<option value="google">Google</option>
		<option value="referral">Referred by a Friend</option>
		<option value="tv" selected>A TV Ad</option>
		<option value="radio">A Radio Ad</option>
	</select>
  
  	<label for="hear-about-us-multi">How did you hear about us?</label>
	<select name="hear-about-us-multi" id="hear-about-us-multi" multiple>
		<option value=""></option>
		<option value="google">Google</option>
		<option value="referral" selected>Referred by a Friend</option>
		<option value="tv" selected>A TV Ad</option>
		<option value="radio">A Radio Ad</option>
	</select>

	<label id="more">Additional thoughts?</label>
	<textarea name="more" id="more">Laughter produces more energy than screams!</textarea>

	<p><strong>Do you agree to our terms of service?</strong></p>
	<label class="label-plain">
		<input type="radio" name="tos" value="yes" checked>
		Yes
	</label>
	<label class="label-plain">
		<input type="radio" name="tos" value="no">
		No
	</label>

	<p><strong>Pick your favorite university.</strong></p>
  
  <label class="label-plain">
		<input type="checkbox" name="scare-tech">
		Scare Tech
	</label>

	<label class="label-plain">
		<input type="checkbox" name="mu" checked>
		Monster University
	</label>

	<p><button type="submit">Submit</button></p>

</form>
let form = document.querySelector('#save-me');
let data = new FormData(form);

// return
/*
	{
		"name": "Mike Wazowski",
		"address": "123 Scare Avenue, Monstropolis",
		"email": "mikew@monstersinc.com",
		"hear-about-us": "tv",
		"hear-about-us-multi": ["referral", "tv"],
		"more": "Laughter produces more energy than screams!",
		"tos": "yes",
		"mu": "on"
	}
*/
let serialized = serialize(data);

The helper function

/**
 * Serialize all form data into an object
 * (c) Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {FormData} data The FormData object to serialize
 * @return {String}        The serialized form data
 */
function serialize (data) {
	let obj = {};
	for (let [key, value] of data) {
		if (obj[key] !== undefined) {
			if (!Array.isArray(obj[key])) {
				obj[key] = [obj[key]];
			}
			obj[key].push(value);
		} else {
			obj[key] = value;
		}
	}
	return obj;
}

How it works

To serialize a FormData object into a plain object, we need to loop through each entry with a for...of loop and add it to an object.

let obj = {};
for (let [key, value] of data) {
	obj[key] = value;
}

But, if there’s more one form field with the same name, the original value will get overwritten. To account for this, we need to check if the key already exists in the obj. If it does, we want to convert it to an array and Array.push() the new value into it.

let obj = {};
for (let [key, value] of data) {
	if (obj[key] !== undefined) {
		if (!Array.isArray(obj[key])) {
			obj[key] = [obj[key]];
		}
		obj[key].push(value);
	} else {
		obj[key] = value;
	}
}

Join the Lean Web Club! Coaching. Courses. Coding resources. Get the skills, confidence, and support you need to learn front-end web development and achieve long-term success.


Find this useful? You can support my work by purchasing an annual membership.