prototype: Add Form.Methods.request as a convenience method for serializing and submitting a form via Ajax.Request to the URL in the form's action attribute.

CHANGELOG

@@ -1,5 +1,11 @@
 *SVN*
 
+* Add Form.Methods.request as a convenience method for serializing and submitting a form via Ajax.Request to the URL in the form's action attribute.  [sam]
+
+  Options passed to request() are intelligently merged with the underlying Ajax.Request options:
+  - If the form has a method attribute, its value is used for the Ajax.Request method option.  If a method option is passed to request(), it takes precedence over the form's method attribute.  If neither is specified, method defaults to "post".
+  - Key/value pairs specified in the parameters option (either as a query string or as a hash) will be merged with (and take precedence over) the serialized form parameters.
+
 * Fix $(form).serialize() in Safari and add support for extending specific tags to Element.addMethods.  Closes #7358.  [Andrew Dupont]
 
 * Add String.prototype.startsWith, String.prototype.endsWith, and String.prototype.include.  Closes #7075.  [Tobie Langel]

src/ajax.js

@@ -82,7 +82,7 @@ Ajax.Request.prototype = Object.extend(new Ajax.Base(), {
   request: function(url) {
     this.url = url;
     this.method = this.options.method;
-    var params = this.options.parameters;
+    var params = Object.clone(this.options.parameters);
 
     if (!['get', 'post'].include(this.method)) {
       // simulate other verbs over post
@@ -90,12 +90,15 @@ Ajax.Request.prototype = Object.extend(new Ajax.Base(), {
       this.method = 'post';
     }
     
-    params = Hash.toQueryString(params);
-    if (params && /Konqueror|Safari|KHTML/.test(navigator.userAgent)) params += '&_='
-    
-    // when GET, append parameters to URL
-    if (this.method == 'get' && params)
-      this.url += (this.url.include('?') ? '&' : '?') + params;
+    this.parameters = params;
+
+    if (params = Hash.toQueryString(params)) {
+      // when GET, append parameters to URL
+      if (this.method == 'get' && params)
+        this.url += (this.url.include('?') ? '&' : '?') + params;
+      else if (/Konqueror|Safari|KHTML/.test(navigator.userAgent))
+        params += '&_=';
+    }
       
     try {
       Ajax.Responders.dispatch('onCreate', this, this.transport);
@@ -109,9 +112,8 @@ Ajax.Request.prototype = Object.extend(new Ajax.Base(), {
       this.transport.onreadystatechange = this.onStateChange.bind(this);
       this.setRequestHeaders();
 
-      var body = this.method == 'post' ? (this.options.postBody || params) : null;
-      
-      this.transport.send(body);
+      this.body = this.method == 'post' ? (this.options.postBody || params) : null;
+      this.transport.send(this.body);
 
       /* Force Firefox to handle ready state 4 for synchronous requests */
       if (!this.options.asynchronous && this.transport.overrideMimeType)

src/form.js

@@ -82,6 +82,23 @@ Form.Methods = {
     form = $(form);
     form.findFirstElement().activate();
     return form;
+  },
+  
+  request: function(form, options) {
+    form = $(form), options = Object.clone(options || {});
+
+    var params = options.parameters;
+    options.parameters = form.serialize(true);
+    
+    if (params) {
+      if (typeof params == 'string') params = params.toQueryParams();
+      Object.extend(options.parameters, params);
+    }
+    
+    if (form.hasAttribute('method') && !options.method)
+      options.method = form.method;
+    
+    return new Ajax.Request(form.action, options);
   }
 }
 

test/unit/fixtures/empty.js

@@ -0,0 +1 @@
+

test/unit/form.html

@@ -23,14 +23,14 @@
 <!-- Log output -->
 <div id="testlog"> </div>
 
-<form id="form">
+<form id="form" method="get" action="fixtures/empty.js">
   <input type="text" name="val1" id="input_enabled" value="4" />
   <div>This is not a form element</div>
   <input type="text" name="val2" id="input_disabled" disabled="disabled" value="5" />
   <input type="submit" />
 </form>
 <div id="form_wrapper">
-  <form id="form_selects">
+  <form id="form_selects" action="fixtures/empty.js">
     <select name="vu">
        <option value="1" selected="selected">One</option>
        <option value="2">Two</option>
@@ -300,6 +300,29 @@
       assert($('tf_selectOne').aSelectMethod);
       assert(!$('tf_selectOne').anInputMethod);      
       assertEqual('select', $('tf_selectOne').aSelectMethod());
+    }},
+    
+    testFormRequest: function() {with(this) {
+      var request = $("form_selects").request();
+      assert(!$("form_selects").hasAttribute("method"));
+      assert(request.url.endsWith("fixtures/empty.js"));
+      assertEqual("post", request.method);
+      assertEqual("vu=1&vm%5B%5D=1&vm%5B%5D=3&nvu=One&nvm%5B%5D=One&nvm%5B%5D=Three&evu=&evm%5B%5D=&evm%5B%5D=Three", Hash.toQueryString(request.options.parameters));
+
+      request = $("form_selects").request({method: "put", parameters: {val2: "hello", val3: "world"}});
+      assertEqual("post", request.method);
+      assertEqual("put", request.parameters['_method']);
+      assertEqual("vu=1&vm%5B%5D=1&vm%5B%5D=3&nvu=One&nvm%5B%5D=One&nvm%5B%5D=Three&evu=&evm%5B%5D=&evm%5B%5D=Three&val2=hello&val3=world", Hash.toQueryString(request.options.parameters));
+      
+      request = $("form").request();
+      assert($("form").hasAttribute("method"));
+      assert(request.url.endsWith("fixtures/empty.js?val1=4"));
+      assertEqual("get", request.method);
+      
+      request = $("form").request({method: "post"});
+      assert(request.url.endsWith("fixtures/empty.js"));
+      assertEqual("val1=4", Hash.toQueryString(request.options.parameters));
+      assertEqual("post", request.method);
     }}
     
   }, 'testlog');