why doesnt my ajax jquery check for username?

Question

this is my j query code: the console displays the "change" which i added for testing if the action is passing through the j query. i also ran the valdiateUname.php by passing parameter manually and it returns the right result but my j query doesn't check for the username. what is the problem? Can anyone help me?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        uname.change(function(){ 
            console.log('change');
            $.ajax({
                type: "POST", 
                data:{                  // data that will be sent
                    uname: uname.val() 
                },
                url:"validateUname.php",   
                //dataType:"text",        // what type of data we'll get back
                beforeSend: function(){
                    if(!$ ('span.unameCheck').html()){
                            $(this).after(' <span class="unameCheck" style="color:blue;"><b>Checking for the availability of username.....</span>');
                      } 
                    },  
                success:function(data){
                    if(data != 0 ) {
                        if(!$ ('span.unameError2').html()){
                            $(this).after(' <span class="unameError2" style="color:red;"><b>Username already exist.</span>');
                        }
                        return false;
                        //valid = true;
                    }
                    else {
                        $(this).toggleClass('unameError2', false);
                        $('span.unameError2').fadeOut().remove();
                        return true;
                    }
                }

            });
        });
      });
</script>

this is my validateUname.php code:

<?php 
require_once("config.php");
$username= isset($_POST["uname"]) ? $_POST["uname"] : $_GET["uname"];
$sql= "SELECT temp_user_login  FROM temp_user_register WHERE temp_user_login = '$username' ";
echo $sql;
    $result = mysql_query($sql); 
        echo $result;
        $msg = mysql_num_rows($result);
        echo $msg;
?>

Answer 1

if(!$ ('span.unameError2').html()) will never fire because it doesn't return false, it returns '' and your conditional statement doesn't check for that.

The proof is in the jsFiddle

Answer 2

Check the uname is declared before use it.

Replace $(this) to uname if $(this) represents to uname .

You should echo only once in your PHP otherwise your jquery function will always go to the if part only like,

$result = mysql_query($sql); 
$msg=0;
if($result){
   $msg = mysql_num_rows($result);
}
echo $msg;

If you are not sure that the request is POST or GET then use $_REQUEST in place of $_POST or $_GET like,

$username = isset($_REQUEST["uname"]) ? $_REQUEST["uname"] : '';

Also use mysqli instead of mysql as it is deprecated

Answer 3

So this worked for me. I am writing so that this may help some one with same problem. There is already too many correct answers but somehow sometimes we need to know what we shouldn't do as well.

uname.blur(function(){ 
        $.ajax({
            type: "POST", 
            data:{                  // data that will be sent
                uname: uname.val() 
            },
            url:"validateUname.php",   
            beforeSend: function(){
                 $ ('span.unameError2').css("color","blue").html(" Checking for username availability....");
                   $ ('span.unameError2').fadeIn('fast'); 
                },  
            success:function(data){
                if(data != 0 ) {
                   $ ('span.unameError2').css("color","red").html("Username already exist.");
                   $ ('span.unameError2').fadeIn('fast');

                }
                else {
                   $ ('span.unameError2').css("color","blue").html("Username available");
                   $ ('span.unameError2').fadeOut(3000);
                }
            }

        });
    });