Hi, Thanks for reading my article on how you can use the JQuery language, PHP and SQL to query your database searching for a username which is already taken and then if the username is taken show a nice fade in message without leaving that page…

First of, what is AJAX, well AJAX stands for Asynchronous JavaScript and XML, developers use this to retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.

You can download the latest JQuery file here: JQuery

Download Source Files

Download Source Text

• register.php
• checkusername.php

Upload them to your web-server, open up checkusername.php and change the mysql connection string values to match your own test server and you should be ready to test, the included file just uses the basic dreamweaver code so you should be able to hook it up through that using your own connection file, change the value of the recordset to match your own database name (dbname) .

Register.php

This file will house our html code which the user will see as the front end, the css will be embedded on this page as will our AJAX Jquery script also the call to the file jquery.js, the user wont be redirected from this page, or the page wont reload, it will query the database without leaving this page, (of course if we were using this commercially we would have a page our form would post to after registration is complete).

HTML Quick Code

<span id="msgbox" style="display:none"></span><br />
<form id="frmReg" name="frmReg" method="post" action="register.php">
username: <input name="username" id="username" type="text" /><br />
password: <input name="password" id="password" type="text" /><br />
<input type="submit" id="button" value="register" />
</form>

jQuery Quick Code The Source Files has Comments

The jquery below will connect to the checkusername.php page each time the user moves the mouse out from the username field, while the connection is made the script will pass along the uname value from the form. you can change the .blur function to .onkeypress which will result in the connection being made each type the user types a letter.

<script language="javascript" type="text/javascript">
$(document).ready(function()
{
	$("#username").blur(function()
	{
		$("#msgbox").removeClass().addClass('messagebox').text('Checking.....').fadeIn("slow");
		$.get("checkusername.php",{ uname:$(this).val() } ,function(data)
        {
		  if(data==0) //if username is there
		  {
		  	$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
			{
			  $(this).html('This Username Already exists...').addClass('messageboxerror').fadeTo(900,1);
			});
          }
		  else // if the username is not there
		  {
		  	$("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
			{
			  $(this).html('This Username is NOT in the database...').addClass('messageboxok').fadeTo(900,1);
			});
		  }

        });

	});
});
</script>

Checkusername.php

This is the page which will execute our AJAX script, it will have our MySQL database connection string, also our SQL statement which will query our database, and return data which will be used in our AJAX to determine if the username is taken already or not..

<?php
if(mysql_num_rows($rsUnameCheck)> 0 ){
        //Usernames: Match
	echo 0;
}else{
        //Usernames: NO Match
	echo 1;
}
?>

THE FORM

The basic form will be a registration form with 2 textfields, one with a Name & ID of username, the other is our password, the username ID will collect the value which is entered into it by the user, we use a .onblur method to invoke the script, after the user clicks out OR tabs out from the text field, it will run the script…

THE RUNNING SCRIPT
Once the user has tabbed out of the text field we use a firefox plugin called firebug to double check what our script is doing, we want the script to pass the username entered in the textfield as a GET method, which means it use’s the url to pass information like checkusername.php?uname=’the value’ were the value would be the username or text entered in the field…

The above picture shows the URL has the parameter uname with a value of marty, this was sent to the script were $_GET php code trapped the value in a variable and used this to check the database for a match, the firebug plugin also has a tab showing the response back from the server, if i had a picture of that above it would have had a response of 1, were the SQL didn’t find any matches and so printed the message on screen that i can use this username…

feel free to give this a shot, after a while you do get to grips with whats happening in the background and understand the code behind it all. Hopefully you can put it to good use..

Tags: AJAX, asynchronous JavaScript and XML, Coding, Javascript, PHP, programing

This entry was posted on Saturday, September 20th, 2008 at 11:01 pm and is filed under Present. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.