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?

Answer 1

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.