Form <-> Object jQuery Transform
by donabrams
HTML
<script src="https://github.com/donabrams/jQuery-Form---Object-Transforms/raw/master/jquery.formObjTransforms.js"></script>
<form id="origForm" action="" method="post"> <br/>
First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/>
Last Name:<input type="text" name="Lname" maxlength="36" size="12"/> <br/>
Gender:<br/>
Male:<input type="radio" name="gender" value="Male"/><br/>
Female:<input type="radio" name="gender" value="Female"/><br/>
Favorite Food:<br/>
Steak:<input type="checkbox" name="food" value="Steak"/><br/>
Pizza:<input type="checkbox" name="food" value="Pizza"/><br/>
Chicken:<input type="checkbox" name="food" value="Chicken"/><br/>
<textarea wrap="physical" cols="20" name="quote" rows="5">Enter your favorite quote!</textarea><br/>
Select a Level of Education:<br/>
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option></select><br/>
Select your favorite time of day:<br/>
<select size="3" name="TofD">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select>
<select multiple="multiple" size="3" name="TofD2">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select>
<select size="3" name="test.a.TofD">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select>
<select multiple="multiple" size="3" name="test.a.TofD2">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select>
<select size="3" name="test2[0].TofD">
<option value="Morning">Morning</option>
...
JavaScript
$(function() {
$("#populate").click(function() {
$("#origForm").objToFields({quote:"We work, yay!"});
return false;
});
$("#populateAndClear").click(function() {
$("#origForm").objToFields({quote:"We work, yay!"}, true);
return false;
});
$("#copy").click(function() {
$("#otherForm").objToFields($("#origForm").fieldsToObj(), true);
console.log("form obj");
console.log($("#origForm").fieldsToObj());
console.log("form obj ignoring nulls");
console.log($("#origForm").fieldsToObj(null, null, true));
console.log("flattened form obj");
console.log($.flattenObject($("#origForm").fieldsToObj()));
console.log("flattened form obj w/ nullAsEmptyString");
console.log($.flattenObject($("#origForm").fieldsToObj(), null, null, true));
return false;
});
})(jQuery);