Copyright © tutorialspoint.com

Prototype Form request() Method

previous next


Advertisements

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:

Syntax:

formElement.request([options]);

Return Value :

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.


previous next

Copyright © tutorialspoint.com