Username Availability Checker With jQuery and Ajax

You might have seen many websites which checks username availability in real time during registration process.For example Gmail or twitter sign up processes, their registration process is user oriented , it tells user availability on run time. This tutorial is to create a similar script which will tell username availability at run time.

In this example we are checking the username entered by the user during filling the form with the usernames already stored in the database using Ajax and Jquery on run time.

So in this example I have created a sample table called ‘registered_users’.

CREATE TABLE IF NOT EXISTS `registered_users` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`name` varchar(20) NOT NULL,
`password` varchar(20) NOT NULL,
PRIMARY KEY (`id`)
)

Now below is the code for the registration page through which users will enter their names.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="container">
<div id="top"> <a href="http://php-dev-zone.blogspot.in/">Username Availability Checker</a></div>
    <div id="wrapper">
         <div id="form">
             <label>Choose Your Username</label>
   <input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
             <span class="check"  ></span> <br/><br/>
       </div>
    </div>

<div id="bottom"><a href="http://php-dev-zone.blogspot.in/2013/05/username-availability-checker-with.html">Back To Tutorial</a></div>
</div>

<!—I have placed js  at bottom in order to make page load faster -->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

$(function()
{
  $('.user_name').keyup(function()
  {
  var checkname=$(this).val();
  var availname=remove_whitespaces(checkname);

  if(availname!=''){
  $('.check').show();
  $('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');

 var String = 'username='+ availname;
  $.ajax({

          type: "POST",
          url: "available.php",
          data: String,
          cache: false,
          success: function(result){

               var result=remove_whitespaces(result);
               if(result==''){

                       $('.check').html('<img src="image/accept.png" /> This Username Is Avaliable');

                       $(".check").removeClass("red");
                      $('.check').addClass("green");
                       $(".user_name").removeClass("yellow");
                      $(".user_name").addClass("white");

               }else{

                       $('.check').html('<img src="image/error.png" /> This Username Is Already Taken');

                       $(".check").removeClass("green");
                    $('.check').addClass("red")
                        $(".user_name").removeClass("white");
                      $(".user_name").addClass("yellow");
            }
         }

      });

   }else{

       $('.check').html('');

       }

  });

});


function remove_whitespaces(str){

     var str=str.replace(/^\s+|\s+$/,'');
     return str;
}

</script>
</body>
</html>

Using this form we will check if the user name entered is already present in the database or not.Depending on the availability proper message will be displayed on the screen.

available.php

<?php
$mysql_db_hostname = "localhost";
$mysql_db_user = "root";
$mysql_db_password = "";
$mysql_db_database = "test";
$con = mysql_connect($mysql_db_hostname, $mysql_db_user, $mysql_db_password) or die("Could not connect database");
mysql_select_db($mysql_db_database, $con) or die("Could not select database");
if(isset($_POST['username']) && !empty($_POST['username'])){
$username=strtolower(mysql_real_escape_string($_POST['username']));
$query="select * from registered_users where LOWER(name)='$username'";
$res=mysql_query($query);
$count=mysql_num_rows($res);
$HTML='';
if($count > 0){
$HTML='user exists';
}else{
$HTML='';
}
echo $HTML;
}
?>

That’s it.You have done it.!

Download

kelatebaru