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:


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">
  <div class="buttonrow"><input type="submit" value="serialize!" /></div>

You can easily post it with Ajax like this:

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

// do the same with a callback:
  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.

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