Live Username Availability Checking using Ajax and jQuery | Php Season

Live Username Availability Checking using Ajax and jQuery

February 17, 2013 by blinkawan

Live Username Availability Checking using Ajax and jQuery. Username and password is widely used in any modern web site right now. Username is unique, it must be different with others. Therefore, we as developers have to write a code to check whether a username is already been taken or not yet.
I wrote simple code to do live check username availability using jQuery and Ajax.Live means you don’t need to click the submit button then send username into another code that returns availability of username. You can customize the code to better suit your need.

Table Structure

+----------+-------------+------+-----+---------+-------+
| Field    | Type        | Null | Key | Default | Extra |
+----------+-------------+------+-----+---------+-------+
| username | varchar(50) | NO   | PRI | NULL    |       |
| password | varchar(32) | NO   |     | NULL    |       |
+----------+-------------+------+-----+---------+-------+

username.php
this is the html form and jQuery function

<html>
  <head>
       <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
      <!-- <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> -->
        
       <script type="text/javascript">
 
         $(document).ready(function(){
            $("#username").change(function(){
                 $("#message").html("<img src='ajax-loader.gif' /> checking...");
             
 
            var username=$("#username").val();
 
              $.ajax({
                    type:"post",
                    url:"check.php",
                    data:"username="+username,
                        success:function(data){
                        if(data==0){
                            $("#message").html("<img src='tick.png' /> Username available");
                        }
                        else{
                            $("#message").html("<img src='cross.png' /> Username already taken");
                        }
                    }
                 });
 
            });
 
         });
 
       </script>
  </head>
 
  <body>
 
       <table>
        <tr>
              <td>Username</td>
              <td>:</td>
              <td><input type="text" name="username" id="username"/><td>
                <td id="message"><td>
        </tr>
 
        <tr>
              <td>Password</td>
              <td>:</td>
              <td><input type="text" name="password" id="password" /><td>
        </tr>
       </table>
  </body>
</html>

check.php

<?php
 
  mysql_connect("localhost","root","");
  mysql_select_db("php_usernamelivecheck");
 
  $username=$_POST["username"];
  $query=mysql_query("SELECT * from user where username='$username' ");
 
  $find=mysql_num_rows($query);
 
  echo $find;
 
?>