Checking username availability with ajax using jQuery

The time when username availability is checked after the page is normaly processed is long way behind us. Google has it, Yahoo has it and many many more sites have it, ajax username availability checker. So in this tutorial we will make an ajax username availability checker powered with jQuery.

What are we making here?

nostyle
In the source code there also is a styled version.
styled

Source

Notice: The source includes both styled and non-styled version.

HTML

  1. <input type=‘text’ id=‘username’> <input type=‘button’ id=‘check_username_availability’ value=‘Check Availability’>  
  2. <div id=‘username_availability_result’></div>  

PHP

  1. //connect to database  
  2. mysql_connect(‘host’‘user’‘pass’);  
  3. mysql_select_db(‘database_name’);  
  4.   
  5. //get the username  
  6. $username = mysql_real_escape_string($_POST[‘username’]);  
  7.   
  8. //mysql query to select field username if it’s equal to the username that we check ‘  
  9. $result = mysql_query(‘select username from users where username = “‘$username .‘”‘);  
  10.   
  11. //if number of rows fields is bigger them 0 that means it’s NOT available ‘  
  12. if(mysql_num_rows($result)>0){  
  13.     //and we send 0 to the ajax request  
  14.     echo 0;  
  15. }else{  
  16.     //else if it’s not bigger then 0, then it’s available ‘  
  17.     //and we send 1 to the ajax request  
  18.     echo 1;  
  19. }  

You will need to change these values:

  • host(mysql db host, usualy localhost)
  • user(mysql db username)
  • pass(mysql db password)
  • database_name(mysql db name)
  • username(mysql db table field)
  • users(mysql db table name)

JQuery

  1. $(document).ready(function() {  
  2.   
  3.         //the min chars for username  
  4.         var min_chars = 3;  
  5.   
  6.         //result texts  
  7.         var characters_error = ‘Minimum amount of chars is 3’;  
  8.         var checking_html = ‘Checking…’;  
  9.   
  10.         //when button is clicked  
  11.         $(‘#check_username_availability’).click(function(){  
  12.             //run the character number check  
  13.             if($(‘#username’).val().length < min_chars){  
  14.                 //if it’s bellow the minimum show characters_error text ‘  
  15.                 $(‘#username_availability_result’).html(characters_error);  
  16.             }else{  
  17.                 //else show the cheking_text and run the function to check  
  18.                 $(‘#username_availability_result’).html(checking_html);  
  19.                 check_availability();  
  20.             }  
  21.         });  
  22.   
  23.   });  
  24.   
  25. //function to check username availability  
  26. function check_availability(){  
  27.   
  28.         //get the username  
  29.         var username = $(‘#username’).val();  
  30.   
  31.         //use ajax to run the check  
  32.         $.post(“check_username.php”, { username: username },  
  33.             function(result){  
  34.                 //if the result is 1  
  35.                 if(result == 1){  
  36.                     //show that the username is available  
  37.                     $(‘#username_availability_result’).html(username + ‘ is Available’);  
  38.                 }else{  
  39.                     //show that the username is NOT available  
  40.                     $(‘#username_availability_result’).html(username + ‘ is not Available’);  
  41.                 }  
  42.         });  
  43.   
  44. }  

Final words

That’s it, easy isn’t it :) . This demo doesn’t have a demonstration page, because it works with mysql database. Sorry about that.

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s