jQuery don't post form after preventdefault

Question

I have an form loaded by AJAX, and inside that form I have render the reCaptcha control. When I post the form, first I validate, and that use my webservice to validate the captcha. If it all data is right I want to post the form.

But the last behavior don't append...

I read this posts:

But none of the solutions work... :(

My code:

$('#myForm').submit(function (e) {
 e.preventDefault();

  var captchaInfo = {
   challengeValue: Recaptcha.get_challenge(),
   responseValue: Recaptcha.get_response(),
  };

  $.ajax({
   type: 'POST',
   url: '@Url.Action("ValidateCaptcha")',
   data: JSON.stringify(captchaInfo),
   contentType: 'application/json; charset=utf-8',
   dataType: 'json',
   success: function (msg) {
    if (msg) {
     $('#myForm').submit();
    }
    else {
     helpers.setCaptcha("captcha");
    }
   },
   error: function (req, status, error) {
    alert("error: " + error);
    helpers.setCaptcha("captcha");
   },
  });
 });

How I resolve this?

Thanks in advance

Ian · Answer 1 · 2013-05-09T16:53:30.910

When you call .submit() the same code will be called (ending up in possibly an infinite loop). Try restructuring and passing a value to the .submit() call, like this:

$('#myForm').submit(function (e, passThrough) {  // <-- DECLARE HERE!!
    if (passThrough) {  // <-- CHECK HERE!!
        e.preventDefault();

        var captchaInfo = {
            challengeValue: Recaptcha.get_challenge(),
            responseValue: Recaptcha.get_response(),
        };

        $.ajax({
            type: 'POST',
            url: '@Url.Action("ValidateCaptcha")',
            data: JSON.stringify(captchaInfo),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                if (msg) {
                    $('#myForm').trigger("submit", [true]);  // <-- PASS HERE!!
                }
                else {
                    helpers.setCaptcha("captcha");
                }
            },
            error: function (req, status, error) {
                alert("error: " + error);
                helpers.setCaptcha("captcha");
            },
        });
    }
});

The value passed (true), is available in the handler's parameters. So just check for that. If it's true, you know it was manually called and shouldn't validate the captcha, basically passing through the handler and allowing the default behavior.

Reference:

.trigger(): http://api.jquery.com/trigger/

Hello. I test this code, and if the user insert the data in form correct and the captcha correct the form is posted. But if the user miss the captcha and in the next try insert the correct captcha the form is not posted... Some sugestion? Thanks! — joaoasrosa, May 10 '13 at 10:08

score 1 · Answer 2 · answered May 09 '13 at 16:52

1

Try removing the submit handler if it validates.

$('#myForm').off('submit');

answered May 09 '13 at 16:52

Maxsquatch

202
1
4

Kevin B · Answer 3 · 2013-05-09T18:00:31.320

-1

Trigger the event on the form node itself.

$('#myForm')[0].submit()

this will cause it to bypass the jQuery bound event.

edited May 09 '13 at 18:00

answered May 09 '13 at 17:45

Kevin B

94,570
16
163
180

downvote? do you not understand what this code does? It does not cause an infinite loop if that's what you're thinking. – Kevin B May 10 '13 at 16:14

jQuery don't post form after preventdefault

3 Answers3