Username Availability Chacker in AJAX and PHP using jQuery

Hello Friend !

Yesterday when i was searching, i was found some new thing.

In this post i will show yuo that how to make afancy Username availability checker using AJAX and PHP wiyh jQuery.

If you are looking for such kind of effect for checking username availability then defenately  this post helps you.

Now let’s see hoe to check username using AJAX and PHP with jQyery.

First of all, write this code in your html code:

<div >
 User Name : <input name="username" type="text" id="username" value="" maxlength="15" />
 <span id="msgbox" style="display:none"></span>
</div>

In this code, “span” with id “msgbox” shows the username availability message from ajax.

CSS Code :

I’ve defined three different class for three type of different message class “messagebox” for “checking….” message, “messageboxok” and “messageboxerror” class for displaying username available and not available messages.

Javascript code:

First of all you have to download jQuery library and include like this :

<script src="jquery.js" type="text/javascript" language="javascript"></script>

And when the focus is moved from the textbox of username the following function is called which call “user_availability.php” through ajax and display the appropriate message with fading effect.

$("#username").blur(function()
{
 //remove all the class add the messagebox classes and start fading
 $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
 //check the username exists or not from ajax
 $.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
 {
  if(data=='no') //if username not avaiable
  {
   $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
   {
    //add message and change the class of the box and start fading
    $(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
   });
  }
  else
  {
   $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
   {
    //add message and change the class of the box and start fading
    $(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1);
   });
  }
 });
});

As you can see in the first line, “all” css class is removed from the div displaying the message and then “messagebox” class is added to that that element with adding the text “checking” within the element and displaying with fading effect.

After that, ajax is used to call the PHP file, and when response is received through Ajax then jQuery is used to show the respective message-box with fading effects.

PHP Code :

//this varible contains the array of existing users
$existing_users=array('timir', 'ankur' ,'binoy','dhruv');
//value got from the get metho
$user_name=$_POST['user_name'];
//checking weather user exists or not in $existing_users array
if (in_array($user_name, $existing_users))
{
 //user name is not available
 echo "no";
}
else
{
  //username available i.e. user name doesn't exists in array
  echo "yes";
}

In the above PHP code, I’ve added four usernames in a array and then check weather that user exists or not in that array and print “yes” or “no” accordingly. The response taken from ajax is used within JavaScript function to display the appropriate message.But, you can use database connection to check the the availability of username in your code.

First of all DOWNLOAD jQuery library.

If you want to see DEMO, CLICK HERE

Please comment on this Post.