Live Username Availability Checking using Ajax and jQuery. Demo Available

Simple script to check username availability using jQuery and Ajax. Try out demo and use it. I used gif loader and jquery fade in effects to make it fit. You can find many script like this but i want to keep my valuable users here to share their development needs.

Table Structure

CREATE TABLE IF NOT EXISTS `username_availablity` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(60) NOT NULL,
  PRIMARY KEY (`id`)
)

CREATE TABLE IF NOT EXISTS `username_availablity` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`username` varchar(60) NOT NULL,

PRIMARY KEY (`id`)

)

PHP

if($_REQUEST)
{
	$username 	= $_REQUEST['username'];
	$query = "select * from username_availablity where username = '".strtolower($username)."'";
	$results = mysql_query( $query) or die('ok');
	
	if(mysql_num_rows(@$results) &gt; 0) // not available
	{
		echo '

if($_REQUEST)

{

$username = $_REQUEST['username'];

$query = "select * from username_availablity where username = '".strtolower($username)."'";

$results = mysql_query( $query) or die('ok');

if(mysql_num_rows(@$results) > 0) // not available

{

echo '

Already Taken

'

	}
	else
	{
		echo '

}

else

{

echo '

Available

';
	}	
}

}

jQuery Code

$(document).ready(function() {
	$('#Loading').hide();    
});

function check_username(){

	var username = $("#username").val();
	if(username.length &gt; 2){
		$('#Loading').show();
		$.post("check_username_availablity.php", {
			username: $('#username').val(),
		}, function(response){
			$('#Info').fadeOut();
			 $('#Loading').hide();
			setTimeout("finishAjax('Info', '"+escape(response)+"')", 450);
		});
		return false;
	}
}

function finishAjax(id, response){
 
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn(1000);
}

$(document).ready(function() {

$('#Loading').hide();

});

function check_username(){

var username = $("#username").val();

if(username.length > 2){

$('#Loading').show();

$.post("check_username_availablity.php", {

username: $('#username').val(),

}, function(response){

$('#Info').fadeOut();

$('#Loading').hide();

setTimeout("finishAjax('Info', '"+escape(response)+"')", 450);

});

return false;

}

function finishAjax(id, response){

$('#'+id).html(unescape(response));

$('#'+id).fadeIn(1000);

}

HTML

User Name

Table Structure

PHP

jQuery Code

HTML

Few More Brilliant Posts !