Easily upgrade your forms to AJAX

 Blog Home

By my standards no website should still use traditional webform GET or POST requests to transfer data to the server. Through AJAX, form data can be sent way faster, since only the necessary data is sent back and forth to the server. Thanks to the hard work of some individual developers, using AJAX to transfer data from html forms has been streamlined and has become very simple. I will demonstrate this by creating a comments form, which will transmit data to the server using the Prototype JavaScript Framework, developed by Sam Stephenson. The data will be processed on the server side and return data to the original html page, where it is displayed.

The Prototype JavaScript Framework is a javascript package containing several very useful functions for occasional JavaScript developers. The two key objects for transmitting data to and from the server are

  • Ajax.Request: Sends form data to the server and stores the response in a local JavaScript variable
  • Ajax.Updater: Sends form data to the server and displays the response in a div

For this example I will use the Ajax.Updater function. The first step is to download the latest Prototype JavaScript Framework .js file from the Prototype Homepage. Include this file in your html file:

<script src="prototype-1.3.1.js" type="text/javascript"></script>

Next let's create a simple html form. The only thing out of the ordinary here is that the form tag doesn't have an action. Instead I added a regular (not type submit) button, and added the onClick event handler to call the javascript function send(). Ignore the DIV tag for now.

<div id="updateDiv">
<form id="commentsForm">
<input name="name" type="text"><br>
<textarea name="comment" cols="20" rows="3"></textarea><br>
<input name="sendbutton" type="button" value="Send" onClick="send();">
</form>
</div>

Now it's time to do some magic. The function send() is called whenever the form button is clicked. In order to transmit all the form information to the server, we need to add up all the form values to name/value pairs. We could do this by hand, but Prototype comes with a function to make it a lot easier for us, Form.serialize(). I supply this function with the parameter $('commentsForm'), which uses another Prototype function $(). This function looks up page elements by their DOM id. Now that I have the parameters that I want to send to the server, I create a new Ajax.Updater object. The following variables are passed in:

  • The first variable is the name of the DIV in which we want to display the data that is returned from the server.
  • The second variable is the filename of the server side script that we want to execute. In this case I used a sample PHP script.
  • The third variable is an array of variables. Here we tell the script transfer data asynchronously (otherwise the browser would freeze until the data is transferred - exactly what we are trying to avoid). We also supply the script with the variable that contains our serialized values from the form.

<script type="text/javascript">
function send(){
var params = Form.serialize($('commentsForm'));
new Ajax.Updater('updateDiv', 'submit.php', {asynchronous:true, parameters:params});
}
</script>

On the server side all I do in this case is return a thank you statement. For this example submit.php only contains one line:

<?= "Thank you for your comments, ".$_POST['name']; ?>

This is quite worthless and in your case would be replaced with whatever you wanted to do with the information from the form. This could be a formmail, database operation, or whatever else application you are writing. This file will return html code or plain text, which will then be displayed in the DIV with the id updateDiv. Earlier I wrapped the form in this DIV, so that when the AJAX request is completed, this form is replaced with the thank you comment from the submit.php file.

This is it. The only true difference between creating a form that handles data on a new page using traditional GET and POST methods, and using AJAX, is to include the .js file and write a send() function that creates the Ajax.Updater function. This little bit of extra work is well worth the decrease in response time when submitting the form. Especially web-based applications, such as CRM systems, will benefit largely from using this technique.

Try this script:



Author: Julian Pscheid           Date published: 26-Nov-05


Blog Home