AJAX Web Form and the Required Files - AJAX

Many sites feature web forms to collect information from users. Unfortunately, these forms often provide a poor experience for the user, with predictable results. This article will show you how to make filling out web forms more fun (or at least less painful) for your users with the help of PHP and some AJAX magic.

TABLE OF CONTENTS:

By: Codex-M

Poor Best

Rating:

/ 87

October 22, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Let us make an actual web application. For example, if you are making a web form that can accept the following fields:

Full name (first and last names only).
Phone numbers (all digits only, no spaces or dashes).
Age (all digits only, no spaces).
Spam protection, such as captcha.

We will need this form to be powered by AJAX so that, when the form is submitted to the server, there will be no refresh or page reload.

The first thing we need to do is let PHP start a session which will be needed to pass captcha answers from the original captcha generator PHP file (like captcha.php)

<?php

session_start();

In this article, we will use the prototype AJAX, so we need to append in the <head> tag the JavaScript files needed for AJAX:

Discussion of the prototype.js is out of the scope of this article. You can read some good references relating to this application.

The next thing we need is the actual web form.

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

Enter your Phone number (numbers only, no dashes and spaces)<br />

Enter your Age (Numbers only)<br />

<br />

Enter the Captcha as shown above:

</form>

The ajaxvalidate.php is the actual PHP script that will process the form inputs. JavaScript executes the sendRequest() function after the user clicks the submit button. The code of this JavaScript function is:

function sendRequest() {

new Ajax.Request("ajaxvalidate.php",

{

method: 'post',

parameters: 'name='+$F('name')+'&phonenumber='+$F('phonenumber')+'&age='+$F('age')+'&captcha='+$F('captcha'),

onComplete: showResponse

});

}

function showResponse(req){

$('show').innerHTML= req.responseText;

}

</script>

As you can see, there are four variables to be submitted to the PHP script (name, phone number, age and the user captcha input). The PHP output will then be shown via the showResponse(req)JavaScript function. Any HTML output will be shown with an ID identified as "show" (see show response function code above).

In the web form, this is the actual code:

The HTML output from PHP will have a background of yellow defined by this style:

P.yellow {background-color: #ffff00;}

</style>

Next: The PHP script to process AJAX inputs >>