Username Availability Checker With jQuery and Ajax

You might have seen that many websites 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. In this tutorial we will make a similar php script that checks the  username availability at run time.

Username Availability Checker

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` (
`name` varchar(20) NOT NULL,
`password` varchar(20) NOT NULL,

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
<html xmlns=""> 
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" />
<div id="container">
 <div id="top">
 <a href="">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 id="bottom">
  <a href="">Back To Tutorial</a>

<!—I have placed js  at bottom in order to make page load faster -->
<script type="text/javascript" src=""></script>
<script type="text/javascript"> $(function() {   
  var checkname=$(this).val();
  var availname=remove_whitespaces(checkname); 
 $('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');
 var String = 'username='+ availname;
      type: "POST",
      url: "available.php",
      data: String,
      cache: false,
      success: function(result){  
      var result=remove_whitespaces(result);
          $('.check').html('<img src="image/accept.png" /> This Username Is Avaliable'); 
          $('.check').html('<img src="image/error.png" /> This Username Is Already Taken');

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

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.


$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.!