Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Check username availability on keypress using jquery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 529
    Comment on it

    Username or email availability or any other types of availability check we can do in this way. When user type on a text box an ajax request has made and check what if its available or not. we only required jquery.js

    HTML

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

    PHP

    //connect to database  
    mysql_connect('host', 'user', 'pass');  
    mysql_selec_db('database_name');  
    
    //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;  
    } 
    

    JQuery

    $(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("check_username.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');  
                    }  
            });  
    
    }  
    

    That's it.

    You will need to change only :

    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)
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: