JavaScript Form Serialization Comparison:   jQuery • dojo • YUI • MochiKit • moo

This page complements the Main Comparison Page but includes mootools instead of Prototype (they're incompatible). See the main page for full notes.

Timer Profiler Iterations: 1 25 50 100 200

Output

NATIVE	check your browser's *native* form serialization
jQuery
jQuery Form
dojo
YUI
MochiKit
moo

The following form contains all of the possible elements that can be submitted (with the exception of <input type="file">). Which elements, and how they should be submitted, is specified here: http://www.w3.org/TR/html401/interact/forms.html#h-17.13

Most enabled input elements and textareas are handled correctly by each of the libraries.
<textarea name="T3" rows="2" cols="15">? Z</textarea>	? Z
<input type="hidden" name="H1" value="x" />
<input type="hidden" name="H2" />
<input type="password" name="PWD" />
<input type="text" name="T1" />
<input type="text" name="T2" value="YES" readonly="readonly" />
<input type="checkbox" name="C1" value="1" />
<input type="checkbox" name="C2" />
<input type="radio" name="R1" value="1" />
<input type="radio" name="R1" value="2" />
<input type="text" name="My Name" value="me" />
The reset input should never be serialized. Prototype and MochiKit get this wrong.
<input type="reset" name="reset" value="NO" />
Normal Single select elements are handled correctly by each of the libraries.
<select name="S1"> (100 options)	ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC
Normal multiple select elements are handled correctly by each of the libraries.
<select name="S2" multiple="multiple" size="3"> (100 options)	ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC
The following select element has a selected option with no value attribute. The option text value should be submitted. S3=YES is correct. S3= is incorrect. dojo gets this wrong in IE.
<select name="S3"><option selected="selected">YES</option></select>	YES
The following select element has a selected option with a value attribute set to "". S4= is correct. S4=NO is incorrect.
<select name="S4"><option value="" selected="selected">NO</option></select>	NO
The following select element has its selectedIndex property set to -1 before serialization. It should not be submitted. dojo and MochiKit get this wrong.
<select name="S5"><option value="NO">NO</option></select>	NO
Submit elements should only appear in the query string when they are the element used to submit the form. Only jQuery and dojo get this right. YUI always includes the first submit element. Prototype sends all the input submit elements (but not button submit elements). MochiKit sends them all.
<input type="submit" name="sub1" value="NO" />
<input type="submit" name="sub2" value="NO" />
<input type="image" name="sub3" src="submit.gif" value="NO" />
<button type="submit" name="sub4" value="NO">NO</button>	NO
Disabled elements should never be submitted. MochiKit and mootools get this wrong.
<input type="text" name="D1" value="NO" disabled="disabled" />
<input type="checkbox" name="D2" value="NO" checked="checked" disabled="disabled" />
<input type="radio" name="D3" value="NO" checked="checked" disabled="disabled" />
<select name="D4"><option selected="selected" value="NO" disabled="disabled">NO</option>	NO
<input type="search" name="SEARCH" value="YES" />