Using synchronous JAX in registration form for checking username availability

Question

I have a registration form. When I hit the Submit button it should check if the Username is not taken and that the passwords match. So I wrote a few functions: one that checks the passwords, one that checks if the username is available and the main function, that calls for the 2 checking functions. The password checking function works nice, but my problem is with the username checking function. This is the function:

function checkIsUsernameExist(){
    if($("#txtNewUsername").val() == "") {
        $("#divIsUsernameExist").html("");
        return false;
    } else {
    $.getJSON("inc/API.php", 
        {
            command : 'isUsernameExist',
            username : $("#txtNewUsername").val(),
        },
        function(result)
        {
            if (result != true){
                $("#divIsUsernameExist").html("This username is available!");
                return true;
            } else {
                $("#divIsUsernameExist").html("This username is not available!");
                return false;
            }
        });
    }
}

When the username is empty, it does return False. But when some value is entered it returns Undefined. Somebody told I should use Synchronous JAX (but didn't tell me how), so I tried to write this code:

function checkIsUsernameExistAsync(){
    if($("#txtNewUsername").val() == "") {
        $("#divIsUsernameExist").html("");
        return false;
    } else {
        $.ajax({
            type: 'POST',
            url: 'inc/API.php',
            data: ({
            command : 'isUsernameExist',
            username : $("#txtNewUsername").val(),
            cache: false,
            async: false
            }),
    success: function(result){
        if (result != true){
                $("#divIsUsernameExist").html("This username is available!");
                return true;
            } else {
                $("#divIsUsernameExist").html("This username is not available!");
                return false;
            }
        }
    });
    }
}

But I get the same result - False when it's empty, Undefined when some value is entered. I tried to change $.ajax to $.getJSON in the second function, but still had the same result.

This is the code from API.php:

case "isUsernameExist":
        echo (isUsernameExist($_REQUEST["username"]));
        break;

it calls for a function in included page BusinessLogic.php, here's this function:

function isUsernameExist($username)
{
    $arr = select("select * from users where username='$username'");
    if(count($arr) == 1)
    return json_encode(true);
    else
    return json_encode(false);
}

How can I make it work??

Thank you!

Answer 1

To summarise the comment chain:

• Avoid synchronous AJAX requests: Remove async: false
• Add `dataType: 'json',
• return inside a success handler of jQuery.ajax does not set the return value of the outer function. To correctly pass the results, define a callback handler. Replace:
  
  
• Before: http://jsfiddle.net/wGfzc/
• After: http://jsfiddle.net/wGfzc/2/