Web | This Site

Learn Prototype
Prototype Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# Prototype Form request() Method

This method is a convenience way 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.

## Syntax:

    formElement.request([options]);

## Return Value :

- It returns a new Ajax.Request.

## Example 1:

Consider the following example:

    <html>
    <head>
    <title>Prototype examples</title>
       <script type="text/javascript"
       src="/javascript/prototype.js">
       </script>
    <script>

    function postIt()
    {
       var form = $('example');

       form.request(); //done - it's posted
    }

    </script>
    </head>

    <body>

      <p>Click the button to see the result.</p>
      <br />

      <form id="example" action="#" onsubmit="return false">
      <fieldset><legend>User info</legend>
      <div><label for="username">Username:</label>
      <input name="username" id="username" value="Sulien" type="text">
      </div>
      <div><label for="age">Age:</label>
      <input name="age" id="age" value="23" size="3" type="text">
      </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>
      </fieldset>
      </form>

      <br />
      <input type="button" value="Post It" onclick="postIt();"/>

    </body>
    </html>

To understand it in better way you can Try it yourself.

## Example 2:

There could be another example where you can do something in your callback function:

    <html>
    <head>
    <title>Prototype examples</title>
       <script type="text/javascript"
       src="/javascript/prototype.js">
       </script>
    <script>

    function postIt()
    {
       var form = $('example');

       form.request({
         onComplete: function(){ alert('Form data saved!') }
       })
    }

    </script>
    </head>

    <body>

      <p>Click the button to see the result.</p>
      <br />

      <form id="example" action="#" onsubmit="return false">
      <fieldset><legend>User info</legend>
      <div><label for="username">Username:</label>
      <input name="username" id="username" value="Sulien" type="text">
      </div>
      <div><label for="age">Age:</label>
      <input name="age" id="age" value="23" size="3" type="text">
      </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>
      </fieldset>
      </form>

      <br />
      <input type="button" value="Post It" onclick="postIt();"/>

    </body>
    </html>

To understand it in better way you can Try it yourself.

## Example 3:

Here is one more example showing you how 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:

    <html>
    <head>
    <title>Prototype examples</title>
       <script type="text/javascript"
       src="/javascript/prototype.js">
       </script>
    <script>

    function postIt()
    {
       var form = $('example');

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

    </script>
    </head>

    <body>

      <p>Click the button to see the result.</p>
      <br />

      <form id="example" action="#" onsubmit="return false">
      <fieldset><legend>User info</legend>
      <div><label for="username">Username:</label>
      <input name="username" id="username" value="Sulien" type="text">
      </div>
      <div><label for="age">Age:</label>
      <input name="age" id="age" value="23" size="3" type="text">
      </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>
      </fieldset>
      </form>

      <br />
      <input type="button" value="Post It" onclick="postIt();"/>

    </body>
    </html>

To understand it in better way you can Try it yourself.

Advertisement

Online Image Processing

Indian Baby Names