Serialize form elements to string in the order in which they appear i…

…n the DOM
samleb · May 13, 2010 · 876ece6 · 876ece6
1 parent 339bc8c
commit 876ece6
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 11 deletions.
diff --git a/src/dom/form.js b/src/dom/form.js
@@ -104,25 +104,34 @@ var Form = {
     // default true, as that's the new preferred approach.
     if (typeof options != 'object') options = { hash: !!options };
     else if (Object.isUndefined(options.hash)) options.hash = true;
-    var key, value, submitted = false, submit = options.submit;
-
-    var data = elements.inject({ }, function(result, element) {
+    var key, value, submitted = false, submit = options.submit, accumulator, initial;
+
+    if (options.hash) {
+      initial = {};
+      accumulator = function(result, key, value) {
+        if (key in result) {
+          if (!Object.isArray(result[key])) result[key] = [result[key]];
+          result[key].push(value);
+        } else result[key] = value;
+        return result;
+      };
+    } else {
+      initial = '';
+      accumulator = function(result, key, value) {
+        return result + (result ? '&' : '') + encodeURIComponent(key) + '=' + encodeURIComponent(value);
+      }
+    }
+
+    return elements.inject(initial, function(result, element) {
       if (!element.disabled && element.name) {
         key = element.name; value = $(element).getValue();
         if (value != null && element.type != 'file' && (element.type != 'submit' || (!submitted &&
             submit !== false && (!submit || key == submit) && (submitted = true)))) {
-          if (key in result) {
-            // a key is already present; construct an array of values
-            if (!Object.isArray(result[key])) result[key] = [result[key]];
-            result[key].push(value);
-          }
-          else result[key] = value;
+          result = accumulator(result, key, value);
         }
       }
       return result;
     });
-
-    return options.hash ? data : Object.toQueryString(data);
   }
 };
 

diff --git a/test/unit/fixtures/form.html b/test/unit/fixtures/form.html
@@ -106,3 +106,14 @@
   </form>
 
 </div>
+
+<form id="form_with_duplicate_input_names" style="display:none">
+  <input type="hidden" name="fact"    id="fdn_f_1" value="sea-wet" />
+  <input type="hidden" name="opinion" id="fnd_o_1" value="sea-cold" />
+  <input type="hidden" name="fact"    id="fnd_f_2" value="sun-hot" />
+  <input type="hidden" name="opinion" id="fnd_o_2" value="sun-ugly" />
+</form>
+
+<form id="form_with_inputs_needing_encoding" style="display:none">
+  <input type="hidden" name="user[wristbands][][nickname]" id="fine_1" value="Hässlich" />
+</form>
diff --git a/test/unit/form_test.js b/test/unit/form_test.js
@@ -280,6 +280,14 @@ new Test.Unit.Runner({
     this.assertEqual('', $('form_with_file_input').serialize());   
   },
 
+  testFormSerializeWithDuplicateNames: function() {
+    this.assertEqual("fact=sea-wet&opinion=sea-cold&fact=sun-hot&opinion=sun-ugly", $('form_with_duplicate_input_names').serialize(false));
+  },
+
+  testFormSerializeURIEncodesInputs: function() {
+    this.assertEqual("user%5Bwristbands%5D%5B%5D%5Bnickname%5D=H%C3%A4sslich", $('form_with_inputs_needing_encoding').serialize(false));
+  },
+
   testFormMethodsOnExtendedElements: function() {
     var form = $('form');
     this.assertEqual(Form.serialize('form'), form.serialize());