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?

In the source code there also is a styled version.

Source

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

HTML

view plaincopy to clipboardprint?

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

PHP

view plaincopy to clipboardprint?

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

view plaincopy to clipboardprint?

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.