- Prototype Tutorial
- Prototype - Home
- Prototype - Short Overview
- Prototype - Useful Features
- Prototype - Utility Methods
- Prototype - Element Object
- Prototype - Number Processing
- Prototype - Strings Processing
- Prototype - Array Processing
- Prototype - Hash processing
- Prototype - Basic Object
- Prototype - Templating
- Prototype - Enumerating
- Prototype - Event Handling
- Prototype - Form Management
- Prototype - JSON Support
- Prototype - AJAX Support
- Prototype - Expressing Ranges
- Prototype - Periodical Execution
- Prototype Useful Resources
- Prototype - Quick Guide
- Prototype - Useful Resources
- Prototype - Discussion
Prototype - Form request() Method
This method is a convenient 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>
Output
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>
Output
Example 3
Here is one more example showing you how to override the HTTP method and add some parameters, by simply using 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>