To download the full working code for this, click here.
Form Ajax Step 1: The HTML Page.
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
- $(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
1 2 3 4 5 6 7 8 9 10 11
<?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!