This post explains you about how to implement Live Username Availability Check with Ajax and PHP and textbox background color change if you enter used username.

 

 

Download Link   Demo Link

Sample database design for table name contact.

This table contains id (primary key), name and age.

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `uname` varchar(250) NOT NULL,
  PRIMARY KEY (`id`)
)

dbConnect.inc.php

Contains database connectivity code

$mysql_db_hostname = "Host name";
$mysql_db_user = "UserName";
$mysql_db_password = "Password";
$mysql_db_database = "Database Name";

$con = mysql_connect($mysql_db_hostname, $mysql_db_user,
       $mysql_db_password or die("Could not connect database");
//Create a new connection
mysql_select_db($mysql_db_database, $con) or
                 die("Could not select database");
// select database

style.css

#frmBox{margin-top: 10%;margin-left: 38%;}
 .red{background-color:pink;}
 .white{background-color:#FFF;}
 .try_option{margin-left: 8%;color:#222;font-size:14px;}

index.php

<script type="text/javascript">
$(function()
{
 $('.username').keyup(function()
 {
   var username=$(this).val();
   username=trim(username);
   if(username!=''){
   $('.check').show();
   $('.check').fadeIn(400).html
      ('<img src="image/ajax-loading.gif" />');
   var dataString = 'username='+ username;
   $.ajax({
      type: "POST",
      url: "check.php",
      data: dataString,
      cache: false,
      success: function(result){
      var result=trim(result);
      if(result==''){
          $('.check').html(username+' Avaliable');
          $('#submit').attr('disabled', '');
          $('#submit').attr('value', 'Active');
          $(".username").removeClass("red");
          $(".username").addClass("white");
      }else{
          $('.check').html(username+' '+result);
          $('#submit').attr('disabled', 'disabled');
          $('#submit').attr('value', 'Deactive');
          $(".username").removeClass("white");
          $(".username").addClass("red");
      }
     }
  });
 }else{
    $('.check').html('');
    $('#submit').attr('disabled', 'disabled');
    $('#submit').attr('value', 'Deactive');
 }
 });
});
function trim(str){
    var str=str.replace(/^\s+|\s+$/,'');
    return str;
}
</script>
<div id="frmBox">
   <div>Check with admin</div><br/>
   Username:- <input type="text" name="username" class="username"
       autocomplete="off">
   <span class="check" style="color:red;" ></span> <br/><br/>
   <input type="button" name="submit" id="submit" value="Deactive"
       disabled="disabled">
</div>

check.php

<?php
include_once('inc/dbConnect.inc.php');
if(isset($_POST['username']) && !empty($_POST['username'])){
   $username=strtolower(mysql_real_escape_string($_POST['username']));
   $query="select * from user where LOWER(uname)='$username'";
   $res=mysql_query($query);
   $count=mysql_num_rows($res);
   $HTML='';
   if($count > 0){
      $HTML='is already use';
   }else{
      $HTML='';
   }
   echo $HTML;
}
?>

prosess.php contain all the logic part.