26 November 2009

Check username availability from database in php using jQuery

Hell Friends
here is an example to Check username availability from database in php using jQuery. This will be done with three steps.
  1. First create a file "index.php" or whatever you want.
  2. Create a "user_availability.php".
  3. Create database named "test" and table named "login".

What is jquery?

JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

index.php(This is the file from where you will input username)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Username availability Checking using jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script language="javascript">

$(document).ready(function()
{
    $("#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);   
            });
          }
               
        });

    });
});
</script>
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.top {
margin-bottom: 15px;
}
.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;
}

</style>
</head>
<body>


<br>
<br>
<div align="center">
<div class="top" >
  Please move the focus out of the box to check the availability of username
</div>
<div >
   User Name : <input name="username" type="text" id="username" value="" maxlength="15" />
   <span id="msgbox" style="display:none"></span>
</div>

</div>
</body>
</html>

user_availability.php


if(isset($_POST['username'])) {
   $username = mysql_real_escape_string($_POST['username']);
   if(!empty($username)) {
     $username_query = mysql_query("SELECT COUNT(`id`) FROM `login` WHERE `username` = '$username'");
     $username_result = mysql_result($username_query,0);
     if($username_result == 0) {
       echo 'yes';
     } else ($username_result == 1) {
       echo 'no';
     }
   }
  }

Database script:


CREATE TABLE `login` (
  `id` bigint(20) NOT NULL auto_increment,
  `username` varchar(100) NOT NULL,
  `password` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `phoneno` bigint(15) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;


INSERT INTO `login` (`id`, `username`, `password`, `email`, `phoneno`) VALUES
(1, 'ankit', '123', 'ankit@gmail.com', 9953471700);