Question

I check two values with ajax. And if both are correct then i want to make a submit (post-back).
But the post-back doesn’t work.

Here is the code:

 $('form').submit(function () {

            var correctCaptcha = false;
            var correctWebcode = false;

        $.ajax({
            url: '/Competition/CheckForm',
            type: "POST",
            data: $(this).serialize(),
            success: function (data) {
                if (data == true) {
                    $('#recaptcha_response_field').removeClass("captchaError");
                    correctCaptcha = true;
                }
                else {
                    Recaptcha.reload();
                    $('#recaptcha_response_field').addClass("captchaError");
                }
            }
        });

        $.ajax({
             // like the code above (for webcode)
        });

        if (correctCaptcha == true && correctWebcode == true) {
            document.forms['form'].submit();
        }
        else { return false; }
    });

Answer 1

Use Async:false

    $.ajax({
        url: '/Competition/CheckForm',
        type: "POST",
        async:false,
        data: $(this).serialize(),
        success: function (data) {
            if (data == true) {
                $('#recaptcha_response_field').removeClass("captchaError");
                correctCaptcha = true;
            }
            else {
                Recaptcha.reload();
                $('#recaptcha_response_field').addClass("captchaError");
            }
        }
    });

This will cause the infinite loop:

if (correctCaptcha == true && correctWebcode == true) {
    document.forms['form'].submit();
}

So use use like this here

if (correctCaptcha == true && correctWebcode == true) {
    return true;
}
else {return false;}