AJAX call using JQuery not setting variable

Question

I'm trying to validate a CAPTCHA using reCAPTCHA and AJAX.

I have a function to do it all but I need to return a true or false value to the calling function to specify whether to submit the form or not.

My AJAX call is being processed correctly but where I set the flag to show that the CAPTCHA was not valid is not being set.

I'm not explaining that well so here's the code:

function validateComment(isReply)
{ 
    formValid = true;
    if (isReply) { qualifier = "Reply"; } else { qualifier = "New"; }
    $("#comment" + qualifier + "Error").hide();
    $.post("/scripts/checkcaptcha.php", 
    { 
        recaptcha_challenge_field : $('#recaptcha_challenge_field').val(), 
        recaptcha_response_field : $('#recaptcha_response_field').val() 
    },
        function(data) 
        {
            if (data == "invalid")
            {
                $("#comment" + qualifier + "Error").html("<p>Incorrect CAPTCHA entered</p>");
                $("#comment" + qualifier + "Error").slideDown();
                formValid = false;
                Recaptcha.reload();
            } 
        }
    );
    alert(formValid);
    return false;
}

Where I set formValid = false is not working for some reason, it's not being set so with the code above formValid is always true which is incorrect.

I'm guessing this has something to do with how things are being processed.

Any ideas as to why and how I can fix this?

Thanks.

Answer 1

I'm pretty sure this is because the validateComment function is executed first. Your ajax response handling function is a callback function, so it is not executed until after the response is loaded (validateComment has already been executed and returned a value by this point). How you can fix this is by setting a global boolean variable (eg is_loaded) and then go into a loop and keep wait until a is_loaded is true, or you can use setInvterval to check every 100ms or something.

Edit: Or you can try loading the response into a variable and checking for errors that way.

var html = $.ajax({
  url: "some.php",
  async: false
}).responseText;

Answer 2

Use:

function validateComment(isReply,callback)
{ 
    var callback=callback||false,formValid = true,qualifier = "New";
    if (isReply) qualifier = "Reply";
    $("#comment" + qualifier + "Error").hide();
    $.post("/scripts/checkcaptcha.php", 
    { 
        recaptcha_challenge_field : $('#recaptcha_challenge_field').val(), 
        recaptcha_response_field : $('#recaptcha_response_field').val() 
    },
    function(data){
            if (data == "invalid")
            {
                $("#comment" + qualifier + "Error").html("<p>Incorrect CAPTCHA entered</p>");
                $("#comment" + qualifier + "Error").slideDown();
                formValid = false;
                Recaptcha.reload();
            }
   }).complete(function(){
        if(typeof callback=='function') callback(formValid);
   });
}

validateComment(true,function(formValid){
    if(formValid){
    //...
    }
    else{
    //...
    }
});