request([options]) -> new Ajax.Request

A convenience method for serializing and submitting the form via an Ajax.Request to the URL of the form’s action attribute. The options parameter is passed to the Ajax.Request instance, allowing to override the HTTP method and to specify additional parameters.

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 hash or a query string) will be merged with (and take precedence over) the serialized form parameters.

Example

Suppose you have this HTML form:

<form id="person-example" method="POST" action="/user/info">
  <fieldset><legend>User info</legend>
  <div><label for="username">Username:</label>
    <input type="text" name="username" id="username" value="" /></div>
  <div><label for="age">Age:</label>
    <input type="text" name="age" id="age" value="" size="3" /></div>

  <div><label for="hobbies">Your hobbies are:</label>
  <select name="hobbies[]" id="hobbies" multiple="multiple">
    <option>coding</option>
    <option>swimming</option>
    <option>hiking</option>
    <option>drawing</option>
  </select>
 </div>
  <div class="buttonrow"><input type="submit" value="serialize!" /></div>
  </fieldset>
</form>

You can easily post it with Ajax like this:

$('person-example').request(); //done - it's posted

// do the same with a callback:
$('person-example').request({
  onComplete: function(){ alert('Form data saved!') }
})

To override the HTTP method and add some parameters, simply use method and parameters in the options. In this example we set the method to GET and set two fixed parameters: interests and hobbies. The latter already exists in the form but this value will take precedence.

$('person-example').request({
  method: 'get',
  parameters: { interests:'JavaScript', 'hobbies[]':['programming', 'music'] },
  onComplete: function(){ alert('Form data saved!') }
})