Using Ajax to Check a Form Field

This is a useful script to check if the users input is ok, before they submit a form

Example:

Choose A Username (must be atleast 7 characters, and you can't choose 'happytutorials' as your username)
  

Introduction:

Like most AJAX function, this feature involved 3 parts

  • the main HTML page, with an input box
  • a Javascript function that runs when the user types something
  • a PHP page, which analysis the data, and creates some feedback

Step 1. Creating the javascript

First we have to create the javascript function, this can be anywhere on your HTML course, but it usual in the between <head> </head> sections to keep your page itself clear of code

Javascript Human Person Language

<script type="text/javascript">

 

var http = false;

 

if(navigator.appName == "Microsoft Internet Explorer") {

http = new ActiveXObject("Microsoft.XMLHTTP");

} else {

http = new XMLHttpRequest();

}


function checkField(textBoxInput) {

http.abort();

 

http.open("GET", "checkField.php?username=" + textBoxInput, true);

 

 

 

http.onreadystatechange=function() {

if(http.readyState == 4) {

document.getElementById('feedback').innerHTML = http.responseText;

}

 

}

http.send(null);

}

</script>

Tell the browser that this part is javascript code

 

This part does some fancy stuff, don't worry what it means, it just sets up the javascript stuff so it can go and get information from another page

 

 

 

 

 

Start a function called checkField, and take a value 'textBoxInput' which is passed in from the form

 

This is the important bit! It opens up a php page, checkField.php and passes over the info, eg, if the user enters 'jonathan' it will open the page like this: checkField.php?username=jonathan

 

This part waits until javascript has opened up the page

 

And sets the content of a div called 'feedback' to the content of the PHP page

Step 2. Making the text input box run the javascript

This code then goes on the form itself

HTML Text Input Form Field Human Person Language

<form id="form1" name="form1" method="post" action="../../html/javascript/newpage.html">

<input type="text" name="textfield" id="textfield"
onkeyup="checkField(this.value)" />

<div id="feedback"></div>&nbsp;
</form>

Start a form area

 

 

Input box wich calls the 'checkField function' every time a key on the keyboard goes 'up' (eg, after it's been pressed)

 

Create a div, with an ID so the feedback from the PHP file can be put somewhere.

Step 1. Tthe PHP page to check the information

PHP Page (checkField.php) Human Person Language

<?

 

$username = $_GET[username];

 

if ($username == "") { print "Please enter a username"; $ok = "no"; }

if ($username == "happytutorials") { print "This username is already in use"; $ok = "no";}

 

if (strlen($username) <= 7) { print "This username is too short";$ok = "no"; }

 

if ($ok != "no") { print "Username ok!"; }

 

?>

Start the PHP script

 

get the $username details

 

if user has entered nothing, give a specific message

if chosen username already exists, give message

 

 

if username is too short, give a message

 

 

if it's all ok, (if $ok doesn't = "no") tell user it is ok!

Ofcourse, you would probably link your PHP page to a database, to do more checks, but this is basically it.

Save this file as checkField.php, and upload it all to your website. It should work!

Click here to download the files