Add test and changes for serializing forms with multiple select to a string to work again.

Signed-off-by: Jorgen Rydenius <[email protected]>

Author: npup

src/prototype/dom/form.js

@@ -119,16 +119,21 @@ var Form = {
       };
     } else {
       initial = '';
-      accumulator = function(result, key, value) {
-        // Normalize newlines as \r\n because the HTML spec says newlines should
-        // be encoded as CRLFs.
-        value = value.gsub(/(\r)?\n/, '\r\n');
-        value = encodeURIComponent(value);
-        // Likewise, according to the spec, spaces should be '+' rather than
-        // '%20'.
-        value = value.gsub(/%20/, '+');
-        return result + (result ? '&' : '') + encodeURIComponent(key) + '=' + value;
-      }
+      accumulator = function(result, key, values) {
+        if (!Object.isArray(values)) {values = [values];}
+        if (!values.length) {return result;}
+        var encodedKey = encodeURIComponent(key);
+        return result + (result ? "&" : "") + values.map(function (value) {
+          // Normalize newlines as \r\n because the HTML spec says newlines should
+          // be encoded as CRLFs.
+          value = value.gsub(/(\r)?\n/, '\r\n');
+          value = encodeURIComponent(value);
+          // Likewise, according to the spec, spaces should be '+' rather than
+          // '%20'.
+          value = value.gsub(/%20/, '+');
+          return encodedKey + "=" + value;
+        }).join("&");
+      };
     }
 
     return elements.inject(initial, function(result, element) {

test/unit/fixtures/form.html

@@ -125,3 +125,21 @@
   <input type="text" name="length" value="foo" />
   <input type="text" name="bar"    value="baz" />
 </form>
+
+<form id="form_with_multiple_select">
+  <input type="text" name="peewee" value="herman" />
+  <select name="colors" multiple>
+    <option value="blue" selected>blue</option>
+    <option value="red">red</option>
+    <option value="green">green</option>
+    <option value="yellow" selected>yellow</option>
+    <option value="not grey" selected>grey</option>
+  </select>
+  <select name="number">
+    <option value="0">0</option>
+    <option value="1">1</option>
+    <option value="2" selected>2</option>
+    <option value="3">3</option>
+  </select>
+  <input type="submit" />
+</form>

test/unit/form_test.js

@@ -325,6 +325,11 @@ new Test.Unit.Runner({
     this.assert(!select.anInputMethod);      
     this.assertEqual('select', select.aSelectMethod());
   },
+
+  testFormSerializeMultipleSelectToQueryString: function () {
+    var form = $("form_with_multiple_select");
+    this.assertEqual("peewee=herman&colors=blue&colors=yellow&colors=not+grey&number=2", form.serialize(false));
+  },
 
   testFormRequest: function() {
     var request = $("form").request();