Home arrow AJAX & Prototype arrow Page 3 - PHP AJAX Form Validation

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:
  1. PHP AJAX Form Validation
  2. AJAX Validation Process Overview
  3. AJAX Web Form and the Required Files
  4. The PHP script to process AJAX inputs
By: Codex-M
Rating: starstarstarstarstar / 87
October 22, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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:

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

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.

<form action="ajaxvalidate.php" method="post" onsubmit="return false;">

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

<input style="background-color: #FFFFC0" type="text" name="name" id="name" size="50">

<br /><br />

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

<input style="background-color: #FFFFC0" type="text" name="phonenumber" id="phonenumber" size="35">

<br /><br />

Enter your Age (Numbers only)<br />

<input style="background-color: #FFFFC0" type="text" name="age" id="age" size="50">

<br /><br />

<img src="captcha.php" />

<br />

Enter the Captcha as shown above:

<br /> <br />

<input style="background-color: #FFFFC0" type="text" name="captcha" id="captcha" size="10">

<br /> <br />

<input type="submit" value="Submit" onClick="sendRequest()">

</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:

<script type="text/javascript">

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:

<p class="yellow" id="show"></p>

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

<style type="text/css">

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

</style>



 
 
>>> More AJAX & Prototype Articles          >>> More By Codex-M
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: