Data from the Form Submit vs Data from Ajax

Question

I'm trying to implement reCAPTCHA in my MVC site, but it doesn't Validate unless I submit it from a form, like this:

    @using(Html.BeginForm("VerifyCaptcha", "Signup") )
    { 
        @ReCaptcha.GetHtml(theme: "clean", publicKey: "6LcnfAITAAAAAAY--6GMhuWeemHF-rwdiYdWvO-9");
        <input type="submit" id="btnVerify" value="Verify" />
    }

    [HttpPost]
    public ActionResult Index(PolicyModel model)
    {
        var result = ReCaptcha.Validate(privateKey: "THE_KEY");
        return View();
    }

I don't want to use form submission because I don't want to return a new view. All my data is being pushed around with ajax in json form. What I'd like to do is:

$.ajax({
    url: 'verifyCaptcha',
    dataType: 'json',
    contentType: "application/x-www-form-urlencoded",
    type: "POST",
    async: false,
    success: function (response) {
        alert(response);
    },
    error: function(response) {
        alert('There was a problem verifying your captcha. Please try again.');
    }
});
return valid;

        [HttpPost]
        public ActionResult VerifyCaptcha()
        {
            var result = ReCaptcha.Validate(privateKey: "THE_KEY");

            return Json(result);
        }

The ajax call gets to the controller, but the Validation method completes immediately, almost as if it doesn't even get to making the request. I'm not sure why the validation always fails if the captcha isn't in a form - is it perhaps losing information like it's public key or something? Is there a workaround to this?

Edit: Added the ajax controller action method without model.

change the button type to button and in your ajax assign a valid url, write ajax inside your button click event — Arunprasanth K V, Feb 23 '15 at 13:16
so you set `type : 'POST'`in your ajax code? putting you code in a completed state make easier to help you — sabotero, Feb 23 '15 at 13:22
Yes, it does. I have a feeling it loses the public key or something, because it ALWAYS returns false, so quickly that it seems as though it's not even submitting the request. — Daniel Minnaar, Feb 23 '15 at 13:25
you have to send the public key in the data property as a json — sabotero, Feb 23 '15 at 13:25

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

Just use serializeArray() or serialize() and change your ajax request to

$.ajax({
    url: 'verifyCaptcha',
    dataType: 'json',
    contentType: "application/x-www-form-urlencoded",
    type: "POST",
    async: false,
    data: $('form').serializeArray(), // $('form').serialize(),
    success: function (response) {
            alert(response);
        }
});

You haven't added the data part in your request. That seems to be the problem

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 23 '15 at 13:35

user1496463

410
3
14

You Sir, are the person who has made my Monday bearable. Works perfectly - thanks a ton! Can you perhaps shed some light as to why I actually need to pass the form as data? – Daniel Minnaar Feb 23 '15 at 13:42
1

Simple reason. You need `data` to validate the request. But since you want it as a form response, you need to build your data object and send it via AJAX. And since you are using jQuery, you can use the built-in functionality to get the data from your form. – user1496463 Feb 23 '15 at 14:42

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

You need to set the Ajax Request with all parameters for a form request. For example the content-type as application/x-www-form-urlencoded.

Look at this: application/x-www-form-urlencoded or multipart/form-data?

UPDATE:
...and yes ...you must do a POST request, and not a GET.

UPDATE:

$.ajax({
    url: 'verifyCaptcha',
    contentType: "application/x-www-form-urlencoded",
    type: "POST",
    success: function (response) {
        alert(response);
    },
    error: function(response) {
        alert('ERROR', response);
    }
});

edited May 23 '17 at 12:28

Community

1
1

answered Feb 23 '15 at 13:16

RikyTres

676
9
31

Ok, just saw you edit. It's more complete but still wrong: try with `content-type: "application/x-www-form-urlencoded"` – RikyTres Feb 23 '15 at 13:26
Okay, I did that. Still a problem. – Daniel Minnaar Feb 23 '15 at 13:30
Check what `alert('ERROR', response);` show. In that `response ` there's the code of the error and then you could find more info about the problem. – RikyTres Feb 23 '15 at 13:35
Nothing is wrong my ajax call. The server-side call for Validate always just returns false. – Daniel Minnaar Feb 23 '15 at 13:36

Data from the Form Submit vs Data from Ajax

2 Answers2