Question

I would like to check the recaptcha control via Ajax.

$(document).ready(function () {
    $('#submit').click(function () {
        $.ajax({
            url: '/Competition/CheckForm',
            type: "POST",
            data: ????,
            success: function (data) {
                alert(data);
                return false;
            },
            error: function (jqXhr, textStatus, errorThrown) {
                alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
                return false;
            }
        });
    });
});

My problem is, how i can transfer the recaptcha data to my ActionResult.

@ReCaptcha.GetHtml(publicKey: "publicKey")

Here is my ActionResult:

[HttpPost]
public ActionResult CheckForm(???)
{
    if (ReCaptcha.Validate(privateKey: "privateKey"))
    {
    }
    return Json();
}

Anyone have an idea how i can check the recaptcha with Ajax?

It’s easy with PHP…there you have the possibility to check the data with a function (“recaptcha_check_answer” from “recaptchalib.php”)

TIA!

Answer 1

Try subscribing to the submit event of the form in order to AJAXify it:

$(document).ready(function () {
    $('#myForm').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (data) {
                alert(data);
            },
            error: function (jqXhr, textStatus, errorThrown) {
                alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
            }
        });
        return false;
    });
});

But if you wanted to AJAX submit a given form when some element is clicked other than its submit button you could also do the following:

$(document).ready(function () {
    $('#someButton').submit(function () {
        var myForm = $('#myForm');
        $.ajax({
            url: myForm.attr('action'),
            type: myForm.attr('method'),
            data: myForm.serialize(),
            success: function (data) {
                alert(data);
            },
            error: function (jqXhr, textStatus, errorThrown) {
                alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
            }
        });
        return false;
    });
});