Sample AJAX Web Form

Please complete the form below and then press "Submit button".

***Update: January 21, 2010: I recommend you will use the modified AJAX Webform with Recaptcha because this is a more appropriate webform for real applications. The modified webform also reports all validation errors at once.

This type of AJAX implementation in PHP is using the Prototype AJAX library. There are other types of AJAX library which are more popular. A good example is the jQuery AJAX library. An example of a jQuery AJAX web form will be covered in the future tutorials of

Enter your Full Name, First name and Last name ONLY (Example: John Doe)

Enter your Phone number (numbers only, no dashes and spaces)

Enter your Age (Numbers only)

Enter the Captcha as shown above:

This form will validate your data entry using AJAX. If you are correct with your data entry, the entire information entered will be shown in this page without reloading. The results of the AJAX call to PHP script will be shown below after pressing submit button (in yellow shaded portion).

Related documentation relating to the development of this tool:

Beginner information about using AJAX calls in PHP:

AJAX is one of the great ways you can develop web applications that does not require the page to be reloaded in order to submit form information. Supposing the above information is not using AJAX, what will happen is that after you click the "Submit" button; the form values (name, captcha, etc.) will be submitted to the PHP script (ajaxvalidate.php).

And what will also happen is that after the script validates the form it will return the values back to the browser which you will only see after page has been reloaded or refreshed in the browser.

If you are using AJAX, the page is not reloaded or refreshed at all. Instead it works in the background by communicating to the PHP script using JavaScript. The same process still happen; after the script validates it will return the values back to the browser without needing the page to be reloaded.

What are the advantages of AJAX?

1.) It helps user experience by speeding up the form processing and returning the values immediately to them without needing the page to be refreshed.

2.) It is useful particularly if the user experiences a slow connection that also affects the reloading time of the page.

3.) Reloading the page cost a lot of server resources since all the entire HTML and server side elements will be called back to the browser.
Using AJAX saves some of these resources by updating only the required and necessary elements back to the browser instead of the entire elements.

The overview of the AJAX technology used in this example

-This AJAX example is using the Prototype AJAX library. -There are other AJAX common solutions such as using jQuery method which is popular and lightweight JavaScript library.

How to output results from PHP to browser using AJAX?
-Simple, just use the PHP echo command to output whatever you like to be returned back to the browser.
-See the screenshot below for the ouptput script lines in the PHP script for this example:
AJAX script example

Download source code

Link To This Tool
1. Click inside the codebox
2. Right-Click then Copy
3. Paste the HTML code into your webpage