HTML Form Submit with AJAX using Prototype.js -method GET / POST

This example demonstrates a simple way to do a request AJAX for sending a complete HTML form to the server and displaying the response using prototype.js. The javascript automatically gets all form elements - the server-response is displayed in a "div" - the server-side script is a simple PHP script to display the contents of the $_GET global variable.

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.

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 first_name. The latter already exists in the form but this value will take precedence.

$('myformPrototype').request({method: 'get',
    parameters: { interests:'JavaScript',first_name:'Bill'},
    onComplete: function(){ alert('Form data saved!') }  })

Server-Response:

index.htm
Download Prototype.js

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="prototype.js" ></script>
<title>My get</title>
</head>
<body>
 <script>  
   function sendSimpleSubmitRequest(){
        //You can easily post it with Ajax like this:
        $("myformPrototype").request(); //done - it's posted   
   }            function sendRequest(){ 
     // do the same (sendSimpleSubmitRequest ) with a callback message: 
      $("myformPrototype").request({ onComplete: function(){ alert('Form data saved!') }  });
      //or a callback whith response
      $("myformPrototype").request({ onSuccess: function(transport) { 
                                                   $("responseServer").innerHTML=transport.responseText;
                                               } 
                                   });


    }</script>
             
              <form action="examples/ex4/getServer.php" onsubmit="return false" name="myformPrototype" id="myformPrototype">
        <input type="text" name="myfield" value="your string">

        <select name="myselect">

          <option value="1">1</option>

          <option value="2">2</option>

          <option value="3">3</option>

          <option value="4">4</option>

        </select>

  <br>

    First Name <input type="text" name="first_name" value=""><br>

    Last Name <input type="text" name="last_name" value=""><br>

    I like: <input type="radio" name="myradio" value="Tom" checked> Tom
            <input type="radio" name="myradio" value="Mike"> Mike<br>

    My friends:

            <input type="checkbox" name="my_check1" value="Maria"> Maria  
            <input type="checkbox" name="my_check2" value="Laura"> Laura 
            <input type="checkbox" name="my_check3" value="John"> John
            <input type="checkbox" name="my_check4" value="Ana"> Ana
            <input type="checkbox" name="my_check5" value="Dan"> Dan

  <br>
           <input type="button" name="button" value="Simple Submit"  onclick="sendSimpleSubmitRequest();" />    

           <input type="button" name="button" value="Submit / Post"  onclick="sendRequest();" />
           <input type="button" name="button2" value="Submit / Get"  onclick="sendRequestGet();" />

  </form>

  

  

  

  

  <br> 

  <b>Server-Response:</b><br>

  <div name="responseServer" id="responseServer"></div>
</body>
</html>

getServer.php

<?if(isset($_POST["button2"]))
{
      print_r($_POST);
  }ELSE{
	  print_r($_GET);
  }
?>

Change Language

HTML Form Submit with AJAX using Prototype.js -method GET / POST