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 :

.messagebox{
position:absolute;
width:100px;
margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #349534;
background:#C9FFCA;
padding:3px;
font-weight:bold;
color:#008000;
}
.messageboxerror{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px;
font-weight:bold;
color:#CC0000;
}

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.

  • Jason

    How can I add the username field into the error message? I want it to say “The username XXXX is not available.”

  • Jason

    How can I add the username field into the error message? I want it to say “The username XXXX is not available.”

  • God

    Yes Jason,
    Just you have to add in “user_availability.php”.

    You have to change line

    $(this).html($(this).val()+’ This User name Already exists’).addClass(‘messageboxerror’).fadeTo(900,1);
    });

    with

    $(this).html($(this).val()+’ This User name Already exists’).addClass(‘messageboxerror’).fadeTo(900,1);
    });

    and

    $(this).html(‘Username available to register’).addClass(‘messageboxok’).fadeTo(900,1);
    });

    with

    $(this).html($(this).html($(this).val()+’ Username available to register’).addClass(‘messageboxok’).fadeTo(900,1);
    });

    Thats it. If you have query then post comment. 🙂

  • God

    Yes Jason,
    Just you have to add in “user_availability.php”.

    You have to change line

    $(this).html($(this).val()+’ This User name Already exists’).addClass(‘messageboxerror’).fadeTo(900,1);
    });

    with

    $(this).html($(this).val()+’ This User name Already exists’).addClass(‘messageboxerror’).fadeTo(900,1);
    });

    and

    $(this).html(‘Username available to register’).addClass(‘messageboxok’).fadeTo(900,1);
    });

    with

    $(this).html($(this).html($(this).val()+’ Username available to register’).addClass(‘messageboxok’).fadeTo(900,1);
    });

    Thats it. If you have query then post comment. 🙂

  • Daniel

    Please show me how I would have to edit this so that it checks usernames stored in a database?

  • Daniel

    Please show me how I would have to edit this so that it checks usernames stored in a database?

  • admin

    Hello Denial,
    you have to just change php file.

    you have to first fire sql query for select all the records from tbl, and store that data in array.

    After that you have to check entered value from that array.

    example :

    $sel_qry=”select * from tablename”;

    $rec=mysql_query($sel_qry);
    $count_rec = 0;
    $rec1 = array();

    while ( $row = mysql_fetch_array($rec))
    {
    $rec1[$count_rec] = $row;
    $count_rec++;
    }

    in $rec1, all data are stored.

    You have to use $rec1 instead of $existing_users.

    Thats it.

    If you have query then post comment.

  • admin

    Hello Denial,
    you have to just change php file.

    you have to first fire sql query for select all the records from tbl, and store that data in array.

    After that you have to check entered value from that array.

    example :

    $sel_qry=”select * from tablename”;

    $rec=mysql_query($sel_qry);
    $count_rec = 0;
    $rec1 = array();

    while ( $row = mysql_fetch_array($rec))
    {
    $rec1[$count_rec] = $row;
    $count_rec++;
    }

    in $rec1, all data are stored.

    You have to use $rec1 instead of $existing_users.

    Thats it.

    If you have query then post comment.

  • http://mp3victim.com/ jz

    hi

    nice code but can you add something so it will only display the outcome if something has been entered – ie not empty

    i dont know java script, im a php kinda guy lol
    i know in php there is

    if($field != “”)

    or

    if(!$field)

    is there something the same in javascript?

  • http://mp3victim.com jz

    hi

    nice code but can you add something so it will only display the outcome if something has been entered – ie not empty

    i dont know java script, im a php kinda guy lol
    i know in php there is

    if($field != “”)

    or

    if(!$field)

    is there something the same in javascript?

  • http://facebookhackingtool.blogspot.com/ facebook hacking

    Hello This is important info, am into all this… awesome stuff m8