Form Ajax : How to Create and Submit a Form Using Ajax

For the longest time, web developers were stuck submitting their forms in the normal way: Click a button, go to a processing page, redirect back. However, now it is possible to submit a form without ever leaving the page with Ajax. Ajax stands for Asynchronous JavaScript, which as stated before, basically means you can submit a form without ever leaving the page.

So how do you use form Ajax? First of all, we’re going use a JavaScript library called jQuery. Don’t be scared of it though, jQuery makes JavaScript easy. What jQuery allows us to do is use form Ajax without having to muck around with all the tedious JavaScript details (which trust me, is a GOOD thing). Without further a due, here is how to submit a form with Ajax.

To download the full working code for this, click here.

Form Ajax Step 1: The HTML Page.

<html>
<head>
<title>Form Ajax Tutorial</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//After the document has loaded, it adds the following handlers
//to the web page.
$(document).ready(function() {
//When the form with id="myform" is submitted...
$("#myform").submit(function() {
     //Send the serialized data to formProcessor.php.
     $.post("formProcessor.php", $("#myform").serialize(),
     //Take our repsonse, and replace whatever is in the "formResponse"
     //div with it.
    function(data) {
          $("#formResponse").html(data);
     }
);
return false;
});
});
</script>
<head>
<body>
<h2&gt;Form Ajax Tutorial</h2>
<p&gt; Fill out some information &lt;/p>
<form id="myform">
<input type="text" name="firstName" value="" /><br />
<input type="text" name="lastName" value="" /><br />
<input type="submit" name="submit" value="Submit" />
</form>
<div id="formResponse">
</div>
</body>
</html>

For anyone who is used to HTML programming, this should all look very familiar. The only confusing part is the JavaScript, but I’ll explain that here. The first bit just includes the jQuery library. This is crucial for form ajax to work. The rest of the function is explained below:

$(document).ready() – This will add handlers to your web page only after the entire page has loaded.
$().submit() – This will catch the click of the submit button so that it doesn’t submit the form the normal way, but the Ajax way instead.
$().post() – This is the part that sends out data to the processing file. It also has a callback function that will modify our page to contain data that the processing file sent back.
$().serialize() – Takes our form data and puts it into an easy to parse format.

Form Ajax Step 2: The Processing Page

<?php
//Get the information that was sent from the form.
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
 
//Get the unix time stamp.
$unixTimeStamp = time();
 
//Print output for out web page to catch.
echo "Hello $firstName $lastName.  The local unix time is <b>$unixTimeStamp</b>";
?>

The processing page is very important for making form ajax work correctly. What this file does is catch the data sent by the form, and then prints out some information. The form is waiting for this information, and then will add it to your page. Note: This file is a .PHP file. You need to be running a web server (or have access to one) that can process php files.

Form Ajax Step 3: You’re Done!

Form Ajax used to be pretty difficult, but now that their are JavaScript libraries like jQuery, MooTools, and Scriptaculous, it’s easier than ever. To download the full working code for this example, click here.

By Jack Slingerland

One reply on “Form Ajax : How to Create and Submit a Form Using Ajax”