diff options
Diffstat (limited to 'offline-submit/jquery.malsup.com.htm')
| -rw-r--r-- | offline-submit/jquery.malsup.com.htm | 583 |
1 files changed, 583 insertions, 0 deletions
diff --git a/offline-submit/jquery.malsup.com.htm b/offline-submit/jquery.malsup.com.htm new file mode 100644 index 0000000..b0008d7 --- /dev/null +++ b/offline-submit/jquery.malsup.com.htm @@ -0,0 +1,583 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>JavaScript Form Serialization Comparison</title>
+<link rel="stylesheet" type="text/css" media="screen" href="../../jq.css" />
+<style type="text/css">
+h1, #intro, #testForm td.hint { font-family: 'trebuchet ms', verdana, arial; }
+h1 { padding-left: 0 }
+#intro { background: #ffc; padding: 10px }
+#banner { text-align: left; }
+code.inline { background-color: #dfe0ff; color: #000 }
+ul { padding-left: 20px; margin: 10px 10px 10px 0 }
+#disclaimer { font-family: arial, sans-serif; font-size: small; font-style: italic; color: #555; margin-bottom: 5px}
+span.name { color: #c22 }
+span.dis { color: #f11 }
+#results { margin: 15px 0 }
+#results div { font-family: monospace; color: #888; }
+#results td { padding: 5px; }
+#testForm { border: 1px solid #888; background-color: #eee; padding: 0px }
+#testForm tr { background-color: #eee; }
+#testForm td { font-family: monospaced; padding: 2px 10px; }
+#testForm td.hint { color: #880; background: #ffc url(infoIcon.png) 5px 50% no-repeat; padding: 5px 5px 5px 30px }
+#toolbar { padding: 5px; border: 1px solid #aaa; border-width: 1px 0; background-color: #eee }
+#main { padding-top: 0; }
+legend, .wrong, span.dis { font-weight: bold }
+.wrong { color: #f00; }
+ul li { list-style-type: square }
+ol li { list-style-type: decimal }
+blockquote { padding: 10px; border: 1px dashed #aaa; line-height: 1.5em; font-family: sans-serif; background-color: #ffe }
+#footer { margin-top: 15px; padding-top: 10px; border-top: 1px solid #ddd; color: #888; }
+#main { padding: 15px }
+</style>
+<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+<script type="text/javascript" src="../jquery.form.js"></script>
+<script type="text/javascript" src="mochi.base.js"></script>
+<script type="text/javascript" src="mochi.iter.js"></script>
+<script type="text/javascript" src="mochi.dom.js"></script>
+
+<script type="text/javascript" src="dojo.js"></script>
+<script type="text/javascript" src="dojo.xhr.js"></script>
+
+<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
+<!--<script type="text/javascript" src="mootools-1.2.1.js"></script>-->
+<script type="text/javascript" src="yahoo.js"></script>
+<script type="text/javascript" src="yui-event.js"></script>
+<script type="text/javascript" src="yui-connection.js"></script>
+
+<script type="text/javascript" src="firebug.js"></script>
+<script type="text/javascript" src="../../chili-1.7.pack.js"></script>
+<script type="text/javascript"><!--
+
+//
+// note that all usage of $ in this file is using Prototype's $ fn
+//
+var q, iter;
+
+// initialize test harness
+jQuery(init);
+
+function init() {
+ // profiling in FF only
+ if (!/Firefox/.test(navigator.userAgent)) {
+ $('timer').checked = true;
+ $('profiler').disabled = true;
+ console.open();
+ }
+
+ // bind the Test buttons to the 'runTest' function
+ jQuery('input.tester').click(function() { runTest(this); });
+
+ // let's see browser's native form serialization too!
+ var match = window.location.href.match(/\?([^#]+)/);
+ if (!match) return;
+ $('nativeOutput').innerHTML = match[1].escapeHTML();
+}
+
+function runTest(e) {
+ $('S5').selectedIndex = -1; // for the S5 test - force selectedIndex to -1
+ iter = $('iterations').value;
+ var name = e.id;
+ var n = '('+iter+') ' + name;
+ var useTimer = jQuery('#toolbar :radio').fieldValue() == 1;
+
+ // start clock
+ useTimer ? console.time(n) : console.profile(n);
+
+ try {
+ // run the test
+ window[name+'Test']();
+ } catch(e) {
+ q = 'ERROR: ' + e.message;
+ }
+
+ // stop clock
+ useTimer ? console.timeEnd(n) : console.profileEnd(n);
+
+ // highlight inaccurate results:
+ // - there should not be any "NO" values, this includes the reset input, submit inputs and disabled inputs
+ // - S5 should not be submitted (the selected index is -1)
+ // - S3 should not be blank
+ // - the query string should not have a trailing ampersand (dojo)
+ // - the "My Name" input should have been converted to My+Name, not My%20Name
+ q = q.replace(/(reset=NO|S5=|&$|sub(\d)=NO|D(\d)=NO)/g, '<span class="wrong">$1</span>');
+ q = q.replace(/S3=&/, '<span class="wrong">S3=</span>&');
+ q = q.replace(/My(%20)Name/,'<span class="wrong">$1</span>');
+ $(name+'Output').innerHTML = q;
+}
+
+function jQueryNativeTest() {
+ var form = jQuery('#testForm');
+ for (var i=0; i < iter; i++)
+ q = form.serialize();
+}
+
+function jQueryFormTest() {
+ var form = jQuery('#testForm');
+ for (var i=0; i < iter; i++)
+ q = form.formSerialize();
+}
+
+function dojoTest() {
+ var form = dojo.byId('testForm');
+ for (var i=0; i < iter; i++)
+ q = dojo.formToQuery(form);
+}
+
+function PrototypeTest() {
+ var form = $('testForm');
+ for (var i=0; i < iter; i++)
+ q = Form.serialize(form);
+}
+
+/*
+function mooTest() {
+ var form = $('testForm');
+ for (var i=0; i < iter; i++)
+ q = form.toQueryString();
+}
+*/
+
+function YUITest() {
+ var form = $('testForm');
+ for (var i=0; i < iter; i++)
+ q = YAHOO.util.Connect.setForm(form);
+}
+
+function MochiKitTest() {
+ var form = $('testForm');
+ for (var i=0; i < iter; i++)
+ q = MochiKit.Base.queryString(form);
+}
+// -->
+</script>
+
+</head>
+<body>
+<h1 id="banner">JavaScript Form Serialization Comparison: jQuery • dojo • Prototype • YUI • MochiKit</h1>
+<div id="intro">
+ This page tests two things about JavaScript form serialization: <strong>quality</strong> and <strong>speed</strong>.
+ <ul>
+
+ <li>Quality is dertermined by analyzing the serialized output according to the <a href="http://www.w3.org/TR/html401/interact/forms.html">W3C Recommendation</a>.</li>
+ <li>Speed is measured using <a href="http://www.getfirebug.com/">Firebug</a> to time (or profile in FireFox) numerous iterations of the serialization process.<sup>[1]</sup></li>
+ </ul>
+ <div id="disclaimer">If you believe the tests or comments on this page are inaccurate
+ or unfair - please let me know. It is not my intent to misrepresent any of these libraries.
+ Feedback can be sent to: forms at malsup dot com.
+ </div>
+ <div>»» Special thanks to Marius Feraru for adding support for native browser output and the EOL test!</div>
+</div>
+<div id="toolbar">
+ <input type="radio" name="time" value="1" checked="checked" id="timer" />Timer <input type="radio" name="time" value="0" id="profiler" />Profiler
+ <span style="margin-left: 15px">Iterations:</span>
+ <select id="iterations" name="iterations" class="tester">
+ <option value="1" selected="selected">1</option>
+ <option value="25">25</option>
+ <option value="50">50</option>
+
+ <option value="100">100</option>
+ <option value="200">200</option>
+ </select>
+ <p />
+ <input id="jQueryNative" type="button" class="tester" value="jQuery 1.3.2 core" />
+ <input id="jQueryForm" type="button" class="tester" value="jQuery 1.3.2 with Form Plugin" />
+ <input id="dojo" type="button" class="tester" value="dojo 1.2.3" />
+ <input id="YUI" type="button" class="tester" value="YUI 2.6.0" />
+ <input id="MochiKit" type="button" class="tester" value="MochiKit 1.4.2" />
+ <input id="Prototype" type="button" class="tester" value="Prototype 1.6.0.3" />
+ <!-- <input id="moo" type="button" class="tester" value="Test moo" /> -->
+</div>
+<div id="main">
+ <form id="results" action="#">
+ <fieldset><legend>Output <span style="color:#666"><em>(errors in red)</em></span></legend>
+ <table>
+ <tr><td>NATIVE</td><td><div id="nativeOutput" class="output"><a href="#" onclick="$('S5').selectedIndex = -1; $('testForm').submit(); return false">check your browser's *native* form serialization</a></div></td></tr>
+ <tr><td>jQuery</td><td><div id="jQueryNativeOutput" class="output"></div></td></tr>
+ <tr><td>jQuery Form</td><td><div id="jQueryFormOutput" class="output"></div></td></tr>
+ <tr><td>dojo</td><td><div id="dojoOutput" class="output"></div></td></tr>
+ <tr><td>YUI</td><td><div id="YUIOutput" class="output"></div></td></tr>
+ <tr><td>MochiKit</td><td><div id="MochiKitOutput" class="output"></div></td></tr>
+ <tr><td>Prototype</td><td><div id="PrototypeOutput" class="output"></div></td></tr>
+ <!--<tr><td>moo</td><td><div id="mooOutput" class="output"></div></td></tr> -->
+
+ </table>
+ </fieldset>
+ </form>
+
+ <p>
+ The following form contains each of the possible elements that can be submitted (with the exception of <code class="inline"><input type="file"></code>).
+ Which elements, and how they should be submitted, is specified here:
+ <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.13">http://www.w3.org/TR/html401/interact/forms.html#h-17.13</a>
+ </p>
+
+ <form id="testForm" action="#" method="get"><div>
+
+ <table>
+ <tr><td class="hint" colspan="2">Most enabled input elements and textareas are handled correctly by each of the libraries.</td></tr>
+ <tr><td><code class="html"><textarea name="T3" rows="2" cols="15">?<br />Z</textarea></code></td><td><textarea name="T3" rows="2" cols="15">?Z</textarea></td></tr>
+ <tr><td><code class="html"><input type="hidden" name="H1" value="x" /></code></td><td><input type="hidden" name="H1" value="x" /></td></tr>
+ <tr><td><code class="html"><input type="hidden" name="H2" /></code></td><td><input type="hidden" name="H2" /></td></tr>
+
+ <tr><td><code class="html"><input type="password" name="PWD" /></code></td><td><input name="PWD" type="password" value="" /></td></tr>
+ <tr><td><code class="html"><input type="text" name="T1" /></code></td><td><input name="T1" type="text" /></td></tr>
+ <tr><td><code class="html"><input type="text" name="T2" value="YES" readonly="readonly" /></code></td><td><input name="T2" type="text" value="YES" readonly="readonly" /></td></tr>
+ <tr><td><code class="html"><input type="checkbox" name="C1" value="1" /></code></td><td><input type="checkbox" name="C1" value="1" /></td></tr>
+ <tr><td><code class="html"><input type="checkbox" name="C2" /></code></td><td><input type="checkbox" name="C2" /></td></tr>
+ <tr><td><code class="html"><input type="radio" name="R1" value="1" /></code></td><td><input type="radio" name="R1" value="1" /></td></tr>
+
+ <tr><td><code class="html"><input type="radio" name="R1" value="2" /></code></td><td><input type="radio" name="R1" value="2" /></td></tr>
+ <tr><td><code class="html"><input type="text" name="My Name" value="me" /></code></td><td><input type="text" name="My Name" value="me" /></td></tr>
+
+ <tr><td class="hint" colspan="2">The reset input should never be serialized. Prototype and MochiKit get this wrong.</td></tr>
+ <tr><td><code class="html"><input type="reset" name="reset" value="NO" /></code></td><td><input type="reset" name="reset" value="NO" /></td></tr>
+
+ <tr><td class="hint" colspan="2">Normal <strong>Single</strong> select elements are handled correctly by each of the libraries.</td></tr>
+
+ <tr><td><code class="html"><select name="S1"></code> <em>(100 options)</em></td><td>
+ <select name="S1">
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ </select>
+ </td></tr>
+ <tr><td class="hint" colspan="2">Normal <strong>multiple</strong> select elements are handled correctly by each of the libraries.</td></tr>
+ <tr><td><code class="html"><select name="S2" multiple="multiple" size="3"></code> <em>(100 options)</em></td><td>
+ <select name="S2" multiple="multiple" size="3">
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ <option value="abc">ABC</option>
+ </select></td></tr>
+
+ <tr><td class="hint" colspan="2">The following select element has a selected option with no value attribute. The option text value should be submitted.
+ <code class="inline">S3=YES</code> is correct. <code class="inline">S3=</code> is incorrect. dojo gets this wrong in IE.</td></tr>
+
+ <tr><td><code class="html"><select name="S3"><option selected="selected">YES</option></select></code></td><td><select name="S3">
+ <option selected="selected">YES</option>
+ </select></td></tr>
+ <tr><td class="hint" colspan="2">The following select element has a selected option with a value attribute set to "". <code class="inline">S4=</code> is correct. <code class="inline">S4=NO</code> is incorrect.
+ </td></tr>
+
+ <tr><td><code class="html"><select name="S4"><option value="" selected="selected">NO</option></select></code></td><td><select name="S4">
+ <option value="" selected="selected">NO</option>
+ </select></td></tr>
+ <tr><td class="hint" colspan="2">The following select element has its <code class="inline">selectedIndex</code> property set to <code class="inline">-1</code> before serialization.
+ It should not be submitted. dojo and MochiKit get this wrong.</td></tr>
+
+ <tr><td><code class="html"><select name="S5"><option value="NO">NO</option></select></code></td>
+ <td><select id="S5" name="S5"><option value="NO">NO</option></select></td></tr>
+ <tr><td class="hint" colspan="2">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.</td></tr>
+ <tr><td><code class="html"><input type="submit" name="sub1" value="NO" /></code></td><td><input type="submit" name="sub1" value="NO" /></td></tr>
+ <tr><td><code class="html"><input type="submit" name="sub2" value="NO" /></code></td><td><input type="submit" name="sub2" value="NO" /></td></tr>
+
+ <tr><td><code class="html"><input type="image" name="sub3" src="submit.gif" value="NO" /></code></td><td><input type="image" name="sub3" value="NO" src="submit.gif" /></td></tr>
+ <tr><td><code class="html"><button type="submit" name="sub4" value="NO">NO</button></code></td><td><button name="sub4" type="submit" value="NO">NO</button></td></tr>
+
+ <tr><td class="hint" colspan="2">Disabled elements should never be submitted. MochiKit and mootools get this wrong.</td></tr>
+ <tr><td><code class="html"><input type="text" name="D1" value="NO" <span class="dis">disabled="disabled"</span> /></code></td><td><input name="D1" type="text" value="NO" disabled="disabled" /></td></tr>
+
+ <tr><td><code class="html"><input type="checkbox" name="D2" value="NO" checked="checked" <span class="dis">disabled="disabled"</span> /></code></td><td><input type="checkbox" checked="checked" disabled="disabled" name="D2" value="NO" /></td></tr>
+ <tr><td><code class="html"><input type="radio" name="D3" value="NO" checked="checked" <span class="dis">disabled="disabled"</span> /></code></td><td><input type="radio" name="D3" value="NO" checked="checked" disabled="disabled" /></td></tr>
+ <tr><td><code class="html"><select name="D4"><option selected="selected" value="NO" <span class="dis">disabled="disabled"</span>>NO</option></code></td><td><select name="D4" disabled="disabled">
+
+ <option selected="selected" value="NO">NO</option>
+ </select></td></tr>
+ <tr><td class="hint" colspan="2">Inputs with a type attribute of something other than<br />
+ PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON<br />
+ should be treated as TEXT inputs.
+ </td></tr>
+ <tr><td><code class="html"><input type="bogus" name="TYPE-TEST" value="YES" /></code></td><td><input type="bogus" name="TYPE-TEST" value="YES" /></td></tr>
+ <tr><td><code class="html"><input type="search" name="SEARCH" value="YES" /></code></td><td><input type="search" name="SEARCH" value="YES" /></td></tr>
+ </table>
+ </div></form>
+ <p />
+ <h1>Notes</h1>
+ This test page does not expose serialization problems that occur during an actual form submit. These include:
+ <p />
+
+ <ul>
+ <li>YUI, Prototype and MochiKit do not support input elements of <code class="inline">type="image"</code>.</li>
+ <li>dojo does not capture the click coordinates of input elements of <code class="inline">type="image"</code>. However, it does correctly recognize it as the submitting element.</li>
+ <li>dojo does not properly support semantic serialization when the form contains an input of <code class="inline">type="image"</code>. When such an element is used to submit
+ the form, it will always appear last in the query string regardless of its semantic position. (This is likely a very
+ low-percentage use case.)</li>
+
+ <li>mootools is not compatible with Prototype and is not included on this test page. A test page that includes mootools can be found <a href="moo.html">here</a>.
+ In summary, mootools does not support semantic serialization and it incorrectly submits disabled fields.
+ </li>
+ </ul>
+ <p />
+ <h1>Encoding</h1>
+ Each of the libraries tested use JavaScript's <code class="inline">encodeURIComponent</code><sup>[2]</sup> function to encode form data.
+ Technically, this does not conform to the HTML spec <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1">which
+ states</a> the following
+ about the <code class="inline">application/x-www-form-urlencoded</code> content type (emphasis added):
+ <blockquote>
+
+ This is the default content type. Forms submitted with this content type must be encoded as follows:<br />
+ <ol>
+ <li>Control names and values are escaped. <strong>Space characters are replaced by `+'</strong>, and then reserved
+ characters are escaped as described in <a href="http://www.w3.org/TR/html401/references.html#ref-RFC1738">[RFC1738]</a>,
+ section 2.2: Non-alphanumeric characters are
+ replaced by `%HH', a percent sign and two hexadecimal digits representing the ASCII code of the character.
+ <strong>Line breaks are represented as "CR LF" pairs (i.e., `%0D%0A')</strong>.</li>
+ <li>The control names/values are listed in the order they appear in the document. The name is separated
+ from the value by `=' and name/value pairs are separated from each other by '&'.</li>
+
+ </ol>
+ </blockquote>
+ While this does not seem to cause any problems, it is interesting and noteworthy.
+ <p />
+ <h1>Links</h1>
+ <ul>
+ <li><a href="http://jquery.com">jQuery</a></li>
+ <li><a href="http://www.dojotoolkit.com/">dojo</a></li>
+
+ <li><a href="http://developer.yahoo.com/yui/">YUI</a></li>
+ <li><a href="http://mochikit.com/">MochiKit</a></li>
+ <li><a href="http://prototypejs.org/">Prototype</a></li>
+ <li><a href="http://mootools.net/">mootools</a></li>
+ </ul>
+ <div id="footer">
+ [1] Timing numerous iterations of the form serialization process is a contrived test case.
+ This is not something that would ever be done with a real form (I hope). And this is why there
+ is an option of 1 in the iterations combobox - so you can run only a single pass if you like.
+ Running numerous iterations simply makes it easier to compare the relative performance
+ of the libraries tested.
+ <p />
+
+ [2] dojo optionally will encode form data in ascii format (using dojo.string.encodeAscii).
+ </div>
+</div>
+</body>
+</html>
|