Introduction to AJAX: Simple Form

5.18.2008 | Old Posts

I thought it was about time I started contributing properly to the community so I have decided to start writing some proper tutorials. In this tutorial I will be using the prototype javascript library to create a simple AJAX form. Prototype is by no means the only way to create a form like this and there are many javascript libraries out there that will do the same thing, such as JQuery.

1) The HTML

We will be using three languages here. HTML, javascript and PHP. I’m assuming here that you have at least a basic understanding of these three languages. So the first thing to do is make the form in an HTML page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<title>Introduction to AJAX: Simple Form</title>
</head>
<body>
<h2>Introduction to AJAX: Simple Form</h2>
<form id="my-form">
Name: <input type="text" id="name" name="name" /><br />
Age: <input type="text" id="age" name="age" /><br />
<input type="button" value="submit" onclick="sendRequest();" />
</form>
<br />
<div id="update_div"></div>
</body>
</html>

So first of all you need to include the prototype.js file. The latest version can always be downloaded on the Prototype website.

3

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

We then make a normal HTML page with a basic form which in real life would want more useful information than just your name and age. Notice we give the form an id attribute and not an action attribute. This is important because you are not going to actually submit the form at any point using HTML, but we do need to reference the form via it’s id.

We also need to add an onclick attribute to the submit button which will call our javascript function. The last important thing to note is the empty div at the bottom with the id “update_div”. This is where we will show the response information from the AJAX request.

2) The PHP

Next is the PHP page. This is where information from our form will be sent. In here we deal with the information and do with it as we please. In this example we are just going to echo out the information received by the AJAX. This is much the same as you would do in a normal HTML form. In this example I have called the file ajax.php.

1
2
3

<?
echo $_POST['name'].' is '.$_POST['age'].' years old';
?>

Nice and simple huh. So now we get on to the exciting bit.

3) The Javascript and AJAX

As I said above we will be using the Prototype javascript library to deal with our AJAX request. This isn’t essential but it does make dealing with AJAX a lot simpler.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script type="text/javascript">
function sendRequest(){
	new Ajax.Request('ajax.php',
	{
		method:'post',
		parameters: $('my-form').serialize(true),
		onLoading: function(){
			$('update_div').innerHTML = "Loading...";
		},
		onSuccess: function(transport){
			var response = transport.responseText || "no response text";
			$('update_div').innerHTML = response;
		},
		onFailure: function(){ 
			$('update_div').innerHTML = "Something went wrong...";
		}
	});
}
</script>

As you can see this is where we define our sendRequest() function that is called when you click the submit button. So what is happening here?

  • The first thing we define is where to send the request (ajax.php).
  • We then say that we are using the POST method (rather than GET) as you would in a normal HTML form.
  • The parameters value defines what actual values get passed to the PHP. Prototype comes with a nice method called seralize(). It basically takes all the values in the form, referenced by it’s id, and converts them into the correct format to pass to the PHP. This is very useful when using AJAX forms.
  • The last thing we do is use three response callbacks that are pre-defined in Prototype. These functions helps us deal with the AJAX request and the information in the response. In this example each method changes the innerHTML of the “update_div” to show either “Loading…”, “Something went wrong…” or the information we recieve “<name> is <age> years old”.

So this is the basis of the javascript functionality. To learn more about how to use prototype you can read their Prototype Tips and Tutorials. I often go back there to see how to use the prototype library.

Conclusion

So that’s how to make a simple AJAX form. The whole HTML file looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<title>Introduction to AJAX: Simple Form</title>
</head>
<body>
<h2>Introduction to AJAX: Simple Form</h2>
<form id="my-form">
Name: <input type="text" id="name" name="name" /><br />
Age: <input type="text" id="age" name="age" /><br />
<input type="button" value="submit" onclick="sendRequest();" />
</form>
<br />
<div id="update_div"></div>
 
<script type="text/javascript">
function sendRequest(){
	new Ajax.Request('ajax.php',
	{
		method:'post',
		parameters: $('my-form').serialize(true),
		onLoading: function(){
			$('update_div').innerHTML = "Loading...";
		},
		onSuccess: function(transport){
			var response = transport.responseText || "no response text";
			$('update_div').innerHTML = response;
		},
		onFailure: function(){ 
			$('update_div').innerHTML = "Something went wrong...";
		}
	});
}
</script>
</body>
</html>

I hope this tutorial will be of some use to people. Click here to see the live example. Enjoy.

  • Digg
  • StumbleUpon
  • del.icio.us
  • Reddit
  • Wikio
  • Technorati
  • Pownce
  • E-mail this story to a friend!

Similar Posts

Responses

ar 25 library
5.19.2008

[...] [...]

dhjapan
6.16.2008

Wow thanks a lot for this article, I couldn’t make my script to work and I’ve been searching for a good article like this one for days.

Comments