Live Username Availability Checking using Ajax and jQuery. Demo Available

Author: Zeeshan Rasool | Last updated on July 27th, 2010

AJAX, JQuery, PHP, Web Development

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.

[ad#ad-4]

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) > 0) // not available
	{
		echo '<div id="Error">Already Taken</div>';
	}
	else
	{
		echo '<div id="Success">Available</div>';
	}	
}

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 '<div id="Error">Already Taken</div>';

}

else

{

echo '<div id="Success">Available</div>';

}

jQuery Code

$(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);
}

$(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);

}

[ad#ad-3]

HTML

<div>
<label>User Name</label>
<input id="username" name="username" type="text" value="" onblur="return check_username();" />
<div id="Info"></div>
<span id="Loading"><img src="loader.gif" alt="" /></span>
</div>

<div>

</div>

[ad#co-2]

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com

Author of 99Points
Zeeshan Rasool is an experienced PHP Web Developer and founder at 99Points. Expert in Codeigniter (MVC), WordPress, JSON, jQuery & HTML5

Friends

Create a Website

Live Username Availability Checking using Ajax and jQuery. Demo Available

Table Structure

PHP

jQuery Code

HTML

Recommended WordPress Themes Store

Friends

Categories

Popular post

Live Username Availability Checking using Ajax and jQuery. Demo Available

Table Structure

PHP

jQuery Code

HTML

Few More Brilliant Posts !

Recommended WordPress Themes Store

Friends

Categories

Popular post