jQuery - e.preventDefault conundrum / can't submit form after preventing default

Question

Goal: Stop 'submit' button, validate field, create popover alerting of results, submit form when popover is closed.

So I have a hidden popover div, and when the submit button is pressed I do this to check for certain conditions AND display the popover:

$("form").submit(function(e) {
    e.preventDefault();
      if (($("#conditions").find("input:checkbox:checked").length ) || $('#radio_condition_1').is(":checked")) {
        $("#popback").css('display', 'block');
    }
 });

Then I THOUGHT this code would submit the form once the popover is cleared:

$("#popback").click(function() {
    $("#popback").css('display', 'none');
    $("form").submit();

});

without:

$("form").submit();

The second code works fine to clear the popover. However, with the submit function inserted it not only doesn't clear the popover, it also doesn't submit the form.

NOTE: there are two forms on the page.

Help?

Do you have multiple forms? can we have a minimal demo such as [jsfiddle](http://jsfiddle.net)? — T J, Jul 15 '14 at 19:25
@Tilwin Joy.. It shouldn't, but it may stop the first `event` from being prevented. @NotaGuruAtAll remove `e.preventDefault()` from `submit()` and see if they both fire properly. — Foreign Object, Jul 15 '14 at 19:28
I've setup a basic fiddle, seems to work: http://jsfiddle.net/6F2zU/6/ — Foreign Object, Jul 15 '14 at 19:41
@NotaGuruAtAll see my answer and concept verification below. — PeterKA, Jul 15 '14 at 19:47

PeterKA · Accepted Answer · 2014-07-22T14:31:19.103

3

The following should do it:

$('form')[0].submit();

What you have $('form').submit() triggers the submit event thereby firing the submit handler again which in turn prevents default form submission and you're back where you started!

CONCEPT VERIFICATION

Step 1: Load the demo above and you'll see submit event triggered in the console.

Step 2: Now uncomment $('form')[0].submit() and comment out $('form').submit() and click run and viola .. the form is submitted .. by-passing the submit event handler.

CONCLUSION: ... see above.

UPDATE

If you have more than one form on the page the code above can be adjusted to target the relevant form. For instance, to submit the first form on the page:

$('form').first()[0].submit();

Or simply use any selectors, such as ID or css, that provides the need level of specificity.

edited Jul 22 '14 at 14:31

answered Jul 15 '14 at 19:25

PeterKA

24,158
5
26
48

That simply triggers the `submit` event which is already prevented, whereas `[0].submit()` submits the form - default action. – PeterKA Jul 15 '14 at 19:27
Please note that that post does not use `event.preventDefault()` as the OP is. – PeterKA Jul 15 '14 at 19:37
Interesting, if i use the native submit first and then switch back to jquery one, then it works, otherwise no joy http://jsfiddle.net/kS3ms/1/ – T J Jul 15 '14 at 19:47
You've got to see my demo before you draw any conclusions. The demo shows you what I have been saying all along and leaves no doubt. This is a fact that amazed me too when I first came across it :) – PeterKA Jul 15 '14 at 19:50

jQuery - e.preventDefault conundrum / can't submit form after preventing default

1 Answers1