check on return value from jquery fails

Question

I use jquery to validate the form, check the math-captcha and finally, send a mail.

The validation works fine and the mail works fine. There is only one problem. When my ajax returns false, the bool validCaptcha keeps always true...

$(document).ready(function() {    
$("#confirm").on("click", function(e) {
    e.preventDefault();        

    //Check name
    var validName = true;
    if ($("#name").val().length == 0) {
        $("#name").addClass('error');
        validName = false;
    }
    $("#name").change(function() {
        $("#name").removeClass('error');
    })
   //Check email
   var validEmail = true;
   if ($("#email").val().length == 0 || validateEmail($("#email").val()) != true) {
        $("#email").addClass('error');
        validEmail = false;
    }
    $("#email").change(function() {
        $("#email").removeClass('error');
    })
    //Check message
    var validMessage = true;
    if ($("#message").val().length == 0) {
         $("#message").addClass('error');
         validMessage = false;
     }
     $("#message").change(function() {
         $("#message").removeClass('error');
     })
   //Check captcha
   var validCaptcha = true;
   $.ajax({
        type: 'POST',           
        url: '../captcha/checkCaptcha.php',
        data: $("#mailform").serialize(),
        success: function(data) {                    
            var result = $.trim(data);
            if (result == 'false') {                    
                $("#inputcaptcha").addClass('error');
                validCaptcha = false;
            } else if (result == 'true') {
                $("#inputcaptcha").removeClass('error');
            }
        }
    });

    //Send email
    if (validName == true && validEmail == true && validMessage == true && validCaptcha == true) {
        $.ajax({
           type: 'POST',           
           url: '../sendMail.php',
           data: $("#mailform").serialize(),
           success: function(data) {                    
               var result = $.trim(data);
               if (result == 'true') {
                   $("#succesmessage").removeClass('hidden');
               }
               else if (result == 'false') {
                   $("#failmessage").removeClass('hidden');
               }
           }
       });
    } else {
        reloadCaptcha();
        $("#inputcaptcha").val("");
    }
});

});

In Firebug I see I get a 'false' back from checkCaptcha.php when e.g. I left the field blank of entered a wrong code.

checkCaptcha.php

session_start();
if ( !empty($_POST['inputcaptcha']) ) {
    if ( $_POST['inputcaptcha'] == $_SESSION['security_number'] )  {
        echo 'true';
    }
    else {
        echo 'false';
    }
}
else {
    echo 'false';
}

To check I first checked the result-value from the captcha-ajax

alert(result) 
//returned false as it should when leaving blank or entering wrong value

Then before calling the mail-ajax I called all bools

 alert('validName='+validName+' & validEmail='+validEmail+' & validMessage='+validMessage+' & validCaptcha='+validCaptcha);
//validCaptcha was true, even when result was false...

What do I not see??

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Arun P Johny, Dec 26 '13 at 12:30

score 2 · Accepted Answer · answered Dec 26 '13 at 12:33

Simply put you can't do that since the validate captcha is an asynchronous request,

Instead you can move the email code to the validate captcha success handler like

$(document).ready(function () {
    $("#confirm").on("click", function (e) {
        e.preventDefault();

        //Check name
        var validName = true;
        if ($("#name").val().length == 0) {
            $("#name").addClass('error');
            validName = false;
        }
        $("#name").change(function () {
            $("#name").removeClass('error');
        })
        //Check email
        var validEmail = true;
        if ($("#email").val().length == 0 || validateEmail($("#email").val()) != true) {
            $("#email").addClass('error');
            validEmail = false;
        }
        $("#email").change(function () {
            $("#email").removeClass('error');
        })
        //Check message
        var validMessage = true;
        if ($("#message").val().length == 0) {
            $("#message").addClass('error');
            validMessage = false;
        }
        $("#message").change(function () {
            $("#message").removeClass('error');
        })
        //Check captcha
        var validCaptcha = true;


        if (validName == true && validEmail == true && validMessage == true) {
            $.ajax({
                type: 'POST',
                url: '../captcha/checkCaptcha.php',
                data: $("#mailform").serialize(),
                success: function (data) {
                    var result = $.trim(data);
                    if (result == 'false') {
                        $("#inputcaptcha").addClass('error');
                    } else if (result == 'true') {
                        $("#inputcaptcha").removeClass('error');
                        $.ajax({
                            type: 'POST',
                            url: '../sendMail.php',
                            data: $("#mailform").serialize(),
                            success: function (data) {
                                var result = $.trim(data);
                                if (result == 'true') {
                                    $("#succesmessage").removeClass('hidden');
                                    reloadCaptcha();
                                    $("#inputcaptcha").val("");
                                } else if (result == 'false') {
                                    $("#failmessage").removeClass('hidden');
                                }
                            }
                        });
                    }
                }
            });
        }
    });
});

so if I get it right, the way I've put it the second ajax-call already started while the first call is still being executed? This was a synchronous AJAX-call I used? — bflydesign, Dec 26 '13 at 12:43

check on return value from jquery fails

1 Answers1