Form <-> Object Jquery Transform
by donabrams
HTML
<form 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>
<option value="Day">Day</option>
<option value="Night">Night</option></select>
<select multiple="multiple" size="3"...
JavaScript
//based on https://gist.github.com/615281
//clearForm and clearFields taken from https://github.com/malsup/form
//example form from tobiascohen.com/files/stackoverflow/jquery-form-serializeObject.html
/*
* jquery.formObjTransform.js
* Adds the following to the jquery namespace:
* $.flattenObject(toFlatten/{})->{}:
* Returns a map of the flattened object using dot/bracket notation ex.: ({a:{b:"",c:["",""]}}-> {'a.b': "", 'a.c': ["",""]}.
* If any object keys in toFlatten contain a "." or "[", output is likely incorrect. Empty objects and undefined values are ignored.
* Not circular reference safe.
* $.fn.formToObj()->{}:
* Takes the inputs, selects, and textareas and parses them into an object. If names have a dot or [], parsed appropriately.
* $.fn.objToForm(obj/{}, clearFirst/bool):
* Takes the object and places the variables into select, textarea, and input nodes of the same name.
* If clearFirst is true, will blank out the form before applying.
* $.fn.clearForm():
* Clears or deselects all select, textarea, and input nodes contained.
* $.fn.clearFields():
* $.fn.clearInputs():
* Clears or deselects a select, textarea, and input node.
* TODO: $.expandObject(toExpand/{}, expandArrays/bool)->{}:
* expandArrays is true by default. reverse of $.flattenObject().
* Returns a map of the flattened object using dot/bracket notation ex.: ({'a.b': "", 'a.c': ["",""]}->{a:{b:"",c:["",""]}}.
*/
(function($) {
var parseFormVal = function(val) {
if (val === "") {
return null;
}
if (val === "true") {
return true;
}
if (val === "false") {
return false;
}
if (val === String(parseInt(val, 10))) {
return parseInt(val, 10);
}
if (val === String(parseFloat(val))) {
return parseFloat(val);
}
return val;
};
var...