Question

I have form where before i was using simple post with <button name="submit" id="register" value="Register">Continue</button>

than i decided to change that post to jquery ajax post:

<script type="text/javascript">
    $(document).ready(function () {

        $("#register").click(function () {

            if (!$("form").valid())
                return false;

            var isContinue = false;

            $.ajax({
                url: "/Validate",
                type: "POST",
                dataType: "text",
                data: { recaptcha_challenge_field: $("input#recaptcha_challenge_field").val(), recaptcha_response_field: $("input#recaptcha_response_field").val() },
                cache: false,
                success: function (data, textStatus, xhr) {
                    isContinue = data === 'true';
                },
                error: function (xhr, st, err) {
                    alert("Sorry error occured, try again later.");
                },
                complete: function () {
                    alert(isContinue);//i could see that alert
                    if (isContinue) {
                        alert(isContinue); //i could see that alert
                        $("form").submit();
                        alert(isContinue); //i could see that alert
                    }
                    else {

                        return false;
                    }
                }
            });
        });
    });
 </script>
<a class="button" id="register">Continue</a

So if all validation including capthca passed than when i clicking to submit button and form does not posted on server. I checked request with chrome and opera network dev tools and they didn’t show that post action, but according with alerts which i placed in javascript the form should be posted.

Then for test i placed another simple submit button and form getting posted so for some reason $("form").submit(); don’t want to post the form.

May be some one may have any ideas what it could be?

UPDATE

I was commenting the ajax post button when i tried simple post button but the thing is
i was having another back button 🙂 which is looking like that:

<button name="submit" class="cancel" id="back" value="Back"> 

so the problem is really with name="submit", i just remove that and all working now.
It would take very long time to figure out that the problem just with name="submit", thanks for help.

Answer 1

This is because the button you’ve named submit is overriding the submit method on the form element, so instead of form.submit being a function that submits the form, it’s now a reference to the button element.

The easiest way of fixing this is to rename your button element.

It’s important to differentiate between $('form').submit() and form.submit(). $('form').submit) is a jQuery method that is not affected by the button named submit, however behind the scenes, jQuery calls the submit attribute on the actual HTMLForm element, which is affected by the button named submit.

There is a bug about this on http://bugs.jquery.com, however as described above, it’s not actually a problem with jQuery itself.

You’re code has another problem; you shouldn’t be using $('form') inside your click handler, as this is building a jQuery object to alllll forms on your page; so you’re checking that alllll forms are valid, and submitting alll forms. Instead, use $(this).closest('form')