Check Username Availability via Jquery

Question

I have a code in place to access my database and to check if a username is taken or not. However no matter what i always end up getting a result "Minimum amount of chars is 3 " even when u enter a username that is more than 3 characters long regardless of if it exists in the database or not. What am i doing wrong

This is the html:

<p><input type="text" class="span2" maxlength = "20" name="username" required id="username" placeholder="Username" pattern = "[A-Za-z][0-9]" title = "Ex: John123">
<input type='button' class="btn btn-success btn-mini" id='check_username_availability' value='Check Availability'></p>
<div id='username_availability_result'></div> 

This is the php file:

<?php
mysql_connect('localhost', 'root', '*****');  
mysql_select_db('testing');  

//get the username  
$username = mysql_real_escape_string($_POST['username']);  

//mysql query to select field username if it's equal to the username that we check '  
$result = mysql_query('select username from users where username = "'. $username .'"');  

//if number of rows fields is bigger them 0 that means it's NOT available '  
if(mysql_num_rows($result)>0){  
    //and we send 0 to the ajax request  
    echo 0;  
}else{  
    //else if it's not bigger then 0, then it's available '  
    //and we send 1 to the ajax request  
    echo 1;  
}  

?>

Finally here is the JQuery:

    <script>
    $(document).ready(function() {  

        //the min chars for username  
        var min_chars = 3;  

        //result texts  
        var characters_error = 'Minimum amount of chars is 3';  
        var checking_html = 'Checking...';  

        //when button is clicked  
        $('#check_username_availability').click(function(){  
            //run the character number check  
            if($('#username').val().length < min_chars){  
                //if it's bellow the minimum show characters_error text '  
                $('#username_availability_result').html(characters_error);  
            }else{  
                //else show the cheking_text and run the function to check  
                $('#username_availability_result').html(checking_html);  
                check_availability();  
            }  
        });  

  });  

//function to check username availability  
function check_availability(){  

        //get the username  
        var username = $('#username').val();  

        //use ajax to run the check  
        $.post("unamecheck.php", { username: username },  
            function(result){  
                //if the result is 1  
                if(result == 1){  
                    //show that the username is available  
                    $('#username_availability_result').html(username + ' is Available');  
                }else{  
                    //show that the username is NOT available  
                    $('#username_availability_result').html(username + ' is not Available');  
                }  
        });  

}  



    </script>

Answer 1

You can follow these steps and your problem should be solved :

1. alert($('#username').val().length) ; it should not be undefined
2. if you are entering more than 3 char in textbox, then it will show the result, that is how you have written your code.
3. Use prepared statement while querying the db.

hope it help...!