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);

15 comments:

  1. i think this code it good but Why i try this code but it like no function?please help me because it's urgent

    ReplyDelete
  2. thanks...problem solve...this source code is succesful....thanks you very much :)

    ReplyDelete
  3. This code is very helpful...Thank You very much!..it really helps my school project...

    ReplyDelete
  4. please help me guys....it always says username available...even the username already exist in the database

    ReplyDelete
  5. no my friend i have checked the script again and it is correct. It is giving me "This User name Already exists" message when username is already exit and "Username available to register" if name not found in database

    ReplyDelete
  6. I've trawled Google looking for a working copy of this script yet without fail all I can find like this example are ones that do not work...

    (I really wish people would check their scripts before posting them to be honest)

    I did manage to find one example working on a site called betadistribution.com but since I can't see the user_availability.php script then I have no clue how they got around the database issue.

    This one like all the others is a lemon.

    ReplyDelete
  7. Hi Mickelodian
    See user_availability.php in the code above, i have written the file code that you have to write in user_availability.php

    ReplyDelete
  8. The share box is irritating for 1024px DUDE
    PLZ Make the correction i can't read anything.

    ReplyDelete
  9. hi ankit.. i have a problem .. i need to check whether the user id is already available using AJAX and javascript.. i dono anyting about jquery .. iv been searching a lot but everywhere im finding the code which ues jquery.. please help... thank you

    ReplyDelete
  10. Hi ankit..
    I want small help.
    Instead of text box can you help me with drop down list.
    My drop down list contains timing field for two hours interval(8-10,10-12,12-2,2-4,4-6,6-8). I tried but it is not displaying any thing.
    Thank you.

    ReplyDelete
  11. hi ankit
    i Had a problem,
    Instead of text box can you help me with drop down list.
    My drop down list contains timing field for two hours interval(8-10,10-12,12-2,2-4,4-6,6-8). I tried but it is not displaying any thing.
    Thank you.

    ReplyDelete
  12. can you please show me what's you are doing?

    ReplyDelete
  13. NO it is showing username is available even if it exists in db.

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. In the php code
    $username = mysql_real_escape_string($_POST['username']);

    Should be :
    $username = mysql_real_escape_string($_POST['user_name']);

    ReplyDelete