Ajax-ed live availability

Cliff Boit on July 26, 2011 in Tutorials | 2 comments

• Tweet
• Email

• Tweet
• Email

In this short tutorial, we are going to create a script that checks for the availability of a username and returns a response to the user when they click outside the input field.

Tweet

Technique used

A database to store our user names
PHP to check for available username
jQuery script.

Database

A simple database with an auto incrementing id and a username field

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

INSERT INTO `users` (`id`, `username`) VALUES
(1, 'tutorialpot');

The Script

$(document).ready(function(){
//the above code is executed once the DOM has finished loading.
//listen for changes on the username field
$("#username").change(function() {
var username = $("#username").val();
var msg = $("#response"); //store the respponse in a msg variable
//show the ajax loader image
$("#response").html('');
//use ajax to post to the php file
$.ajax({
    type: "POST",
    url: "php/check.php",
    data: "username="+ username,
    success: function(msg){
  //listen for a complete on our request and remove the ajax loader image.
    $("#response").ajaxComplete(function(event, request){
	if(msg == '1')
	{ //success occured
		$("#response").remove();
	    $("#username").removeClass("red");
	    $("#username").addClass("green");
        status.html('');
	}
	else
	{  //an error occured
		$("#response").remove();
	     $("#username").removeClass("green");
		 $("#username").addClass("red");
		status.html('');
	}
  });
   }
  });
});
});

The jQuery script listens for change events on our username field and sends the values of the field to the php script which in turn checks for the username in a specified database if the username is taken, the php file echoes zero (“error”) and the script show the specified error message.
When the php script echoes 1 (“success”) the script in turn shows the specified success message.

The php

Remember to connect to the database

50)
		{
			$errors['username']='Please fill in a valid name (3-50)';
		}else{$contents['username']=$_POST['username'];}

if(!($errors))
		{
$username = $contents['username'];
$sql= mysql_query("SELECT id FROM users WHERE username='$username'");
$rows= mysql_num_rows($sql);
if($rows==1)
{
echo '0';
}
else
{
echo '1';}
}
else{
echo '0';}
?>

The php file simply checks if there is a username in the database that matches the username entered by the user,
If the mysql query returns one the script in turn echoes 0 for manipulation by our jQuery script as a status

Demo

And finally

What do you think?
If you liked this script, play your role and simply share it . . . . . . . . . . . . A simple thank you.