user check availability with jQuery

Question

i am trying to check my user name is if its available to register or not by using jQuery, the script actually worked with no errors but it keeps say " the username in use " even there is no username record in the database.

here is the php code for my function

function checkavailabileUserName($UserName) {
if(isSet($_POST['userName']))
{
$username = $_POST['userName'];


$sql_check = mysql_query("SELECT userUserName FROM user WHERE userUserName='$username'") or die(mysql_error());

if(mysql_num_rows($sql_check))
{
echo '<font color="red">The username <STRONG>'.$username.'</STRONG> is already in use.</font>';
}
else
{
echo 'OK';
}

}

}

i call this function on a page called RegisterUserAction.php like this

checkavailabileUserName($UserName);

HERE IS JAVASCRIPT CODE

pic1 = new Image(16, 16); 
pic1.src = "loader.gif";

$(document).ready(function(){

$("#userName").change(function() { 

var usr = $("#userName").val();

if(usr.length >= 3)
{
$("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');

    $.ajax({  
    type: "POST",  
    url: "RegisterUserAction.php",
    data: "userName="+ usr,  
    success: function(msg){  

   $("#status").ajaxComplete(function(event, request, settings){ 

    if(msg == 'OK')
    { 
        $("#userName").removeClass('object_error'); // if necessary
        $("#userName").addClass("object_ok");
        $(this).html('&nbsp;<img src="accepted.png" align="absmiddle"> <font color="Green"> Available </font>  ');
    }  
    else  
    {  
        $("#userName").removeClass('object_ok'); // if necessary
        $("#userName").addClass("object_error");
        $(this).html(msg);
    }  

   });

 } 

  }); 

}
else
    {
    $("#status").html('<font color="red">The username should have at least <strong>3</strong> characters.</font>');
    $("#userName").removeClass('object_ok'); // if necessary
    $("#userName").addClass("object_error");
    }

});

});

AND FINALLY HERE IS HTML CODE FOR THE FIELD

<td><label for="userName"></label>
      <input type="text" name="userName" id="userName" onkeyup="twitter.updateUrl(this.value)" class="inn" />

      <div id="status"></div>
<script type="text/javascript">
$( function () {
twitter.screenNameKeyUp();
$('#user_screen_name').focus();
});</script>

Where did i go wrong ?

Answer 1

There is a mistake in your code. You are using $UserName as an argument for the function checkavailabileUserName but you are not passing that argument to the function. That results in error and so only you were getting the message "Username In Use".

Remove that $UserName argument from the function and code will work perfectly.

May be it will be good if you can make your code more clean and tidy and may use the jquery ajax call and PHP code like:

Jquery Ajax Call

jQuery(document).ready(function(){
     jQuery("#userName").change(function() {
        jQuery("#status").empty();
        var usr = jQuery("#userName").val();
        if(usr.length >= 3)
        {
            jQuery("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');
            jQuery.ajax({  
               type: "POST",  
               url: "RegisterUserAction.php" ,
               data: "userName="+ usr,  
               success: function(response){
                        if(response)
                        { 
                            jQuery('#status').html('<img src="accepted.png" align="absmiddle"> <font color="Green"> Available </font>');
                            return true;
                        }  
                        else  
                        {  
                            jQuery('#status').html('<font color="red">The username <STRONG>'+usr+'</STRONG> is already in use.</font>');
                            return false;
                        }  

                    }
        });
    }
    else
    {
        jQuery("#status").html('<font color="red">The username should have at least <strong>3</strong> characters.</font>');
        return false;
    }
     });
});

PHP CODE :

function checkavailabileUserName($checkavailabileUserName) 
{
    if(isset($_POST['userName']))
    {
    $username = $_POST['userName'];

    $sql_check = mysql_query("SELECT userUserName FROM user WHERE userUserName ='$username'") or die(mysql_error());

    if(mysql_num_rows($sql_check)>0)
    {
        echo false;
    }
    else
    {
        echo true;
    }
   }
   else 
   {
    echo false;
   }
}  

Answer 2

First you should be using Firebug for FF or Chrome / IE developer tools depending on your browser of choice (press F12). Take a look at the console and see what the AJAX post looks like. Make sure it's posting correctly and that you have an actual value. Normally I do my jQuery AJAX like so:

$.ajax({
    type: "POST",
    url: "RegisterUserAction.php",
    data: {
        userName: usr
    },
    dataType: "json",
    success: function(data) {
        if(data.success == 'true'){
            //do something
        } else {
            //do something               
        }
    }
});

Then on the PHP page I send my json encoded callback like so:

if (mysql_num_rows($sql_check)>0) {
    //do something
    $return_arr["success"] = 'true';
} else {
    //do something
    $return_arr["success"] = 'false';
}
echo json_encode($return_arr);

Try modifying your AJAX to utilize the data method and dataType in my example and see if that helps. Take a look at the Firebug/Dev tools console. Is the value going over? If so then there may be something wrong with the PHP side. Let me know how it goes and if it's the PHP portion we can look into that further (although it looks fine to me right now).

Answer 3

I think it this line:

data: "userName="+ usr,

according to jQuery specification data should be passed in this format

{ "userName": usr}

so probably you don't send any POST data at all, and you don't enter into

if(isSet($_POST['userName'])){

and the message sent if empty (not 'OK') that s why you get answer "the username in use"