Live Username Availability Checking using Ajax and jQuery

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;

?>

Try to type some letters in the username text field and then change focus of the cursor on the password field. Checking is on the way
checking

If the username you wrote is not yet registered, the system will tell you that it is available to be used.
available

However if you pick up username that have been registered the system will tell you too
taken

Advertisements

17 thoughts on “Live Username Availability Checking using Ajax and jQuery

  1. Pingback: Jquery Ajax username validation not working | BlogoSfera

  2. $username=$_POST[“username”];
    $query=mysql_query(“SELECT * from user where username=’$username’ “);

    This should use mysql_real_escape_strings() to prevent SQL injection

  3. Awesome! I was able to implement this easily, mix in some css with jquery, and even integrate it with a validation script that checked for username min/max lengths, etc. All I need now is to add in some sterilization and my registration form is looking top of the line! Thanks a lot!

  4. I am not even beginner in jquery but still i don’t find any difficulty to integrate this code to my project…

    Thanks a lot..

    100% works…

    If you have more tutorial please share me the link so that every one can gain knowledge…

    Thanks in advance…

  5. I want to integrate this into my wordpress custom login page. what should we use inplace of this, js/jquery-1.7.1.min.js ?

    should I change anything in check.php for wordpress site ?

    Thanks

  6. For some reason, this isn’t working for me. 😦 I copied and pasted the code to play around with, but it’s not coming up with the “Checking…, free or used” message.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s