cferdinandi/serialize.html Secret

## serialize.html
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Serialize</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<style type="text/css">
			body {
				margin: 1em auto;
				max-width: 40em;
				width: 88%;
			}

			label,
			input,
			select,
			textarea {
				display: block;
				width: 100%;
			}

			input,
			select,
			textarea {
				margin-bottom: 1em;
			}

			[type="radio"],
			[type="checkbox"] {
				display: inline-block;
				width: auto;
			}
		</style>
	</head>

	<body>


		<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>


		<script>
			/**
			 * 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;
			}

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

	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Serialize</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style type="text/css">
	body {
	margin: 1em auto;
	max-width: 40em;
	width: 88%;
	}

	label,
	input,
	select,
	textarea {
	display: block;
	width: 100%;
	}

	input,
	select,
	textarea {
	margin-bottom: 1em;
	}

	[type="radio"],
	[type="checkbox"] {
	display: inline-block;
	width: auto;
	}
	</style>
	</head>

	<body>


	<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>


	<script>
	/**
	* 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;
	}

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

	</body>
	</html>