JQuery: Trying to disable button if at least one field is in use

Question

I'm creating a registration form and I want to validate it and check username and email availability before it allows the user to submit the form, this way I do not need a separate page telling them the errors and making them start over.

The code for checking availability is:

function checkUsername() {
$.post('php/availability.php',{username: $('#username').val()}, function(usernamedata){
if(usernamedata.exists){
    $("#username").css('background-image','url(images/in-use.png)');
    $("#username-use").val("inuse");
}else{
    $("#username").css('background-image','none');
    $("#username-use").val("free");
} }, 'JSON'); }

The code for checking the email is exactly the same, apart from the obvious differences. It checks the database for matching usernames/emails and sets the value of a hidden field depending on the outcome. The hidden fields are both set to "free" by default.

This is the code that is supposed to disable the register button if either username or email is set to 'inuse'. However, it seems to have a mind of its own and I can't figure out how it is getting to its end result.

function buttonCheck() {
var username = $("#username-use").val();
var email = $("#email-use").val();
if(username == "free" && email == "free") {
    $("#registration-send").attr('disabled','disabled');
} 
else {
    $("#registration-send").removeAttr('disabled');
} }

It seems to be backwards in its working out, enabling the button when something is 'inuse'. I have tried swapping things around but it doesn't change anything.

checkUsername()/checkEmail() and buttonCheck() are both called together onChange of their associated inputs:

<input id="username" name="username" type="text" autocomplete="off" maxlength="100" class="req-string" onChange="checkUsername(); buttonCheck()">

Answer 1

Free tip : Embrace the callback functions

function checkUsername() {
$.post('php/availability.php',{username: $('#username').val()}, function(usernamedata){
if(usernamedata.exists){
    $("#username").css('background-image','url(images/in-use.png)');
    $("#registration-send").attr('disabled','disabled');
}else{
    $("#username").css('background-image','none');
    $("#registration-send").removeAttr('disabled');
} }, 'JSON'); }

You don't need to set some hidden field. The best way is to handle that in your success callback itself.

Also you can write similar code for checking email address atomicity.

UPDATE::

var correctUsername=0,correctEmail=0;

function checkUsername() {
$.post('php/availability.php',{username: $('#username').val()}, function(usernamedata){
if(usernamedata.exists){
    $("#username").css('background-image','url(images/in-use.png)');
    $("#registration-send").attr('disabled','disabled');
    correctUsername=0;
}else{
    $("#username").css('background-image','none');
    correctUsername=1;
    if(correctEmail==1){
        $("#registration-send").removeAttr('disabled');
    }
} }, 'JSON'); }

Repeat the similar code for email where you will set correctEmail=1 and removeAttr if correctUsername==1