jQuery: form not submitting with $("#id").submit(), but will submit with a 'submit' button?

Question

<form method="post" action="load_statements.php?action=load" id="loadForm"
                            enctype="multipart/form-data">

that is my form, which looks fine to me. in that form, i put this button:

<input type="button" name="submit" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />

here is the function it calls:

function confirmSubmit() {
    // get the number of statements that are matched
    $.post(
        "load_statements.php?action=checkForReplace",
        {
            statementType : $("#statementType").val(),
            year : $("#year").val()
        },
        function(data) {
            if(data['alreadyExists']) {
                if( confirm("Statements already exist for " + $("#statementType").html() + " " + $("#year").val() +
                    ". Are you sure you want to load more statements with these settings? (Note: All duplicate files will be replaced)"
                )) {
                    $("#loadForm").submit();
                }
            } else {
                $("#loadForm").submit();
            }
        }, "json"
    );
}

and as you can see, it calls $("#loadForm").submit();, but the form is not submitting (ie. the page is not refreshing). why is that?

thanks!

question from:https://stackoverflow.com/questions/3303874/jquery-form-not-submitting-with-id-submit-but-will-submit-with-a-subm

Answer 1

http://api.jquery.com/submit/

The jQuery submit() event adds an event listener to happen when you submit the form. So your code is binding essentially nothing to the submit event. If you want that form to be submitted, you use old-school JavaScript document.formName.submit().

---

I'm leaving my original answer above intact to point out where I was off. What I meant to say, is that if you have a function like this, it's confusing why you would post the values in an ajax portion and then use jQuery to submit the form. In this case, I would bind the event to the click of the button, and then return true if you want it to return, otherwise, return false, like so:

$('#submit').click( function() {
  // ajax logic to test for what you want
  if (ajaxtrue) { return confirm(whatever); } else { return true;}
});

If this function returns true, then it counts as successful click of the submit button and the normal browser behavior happens. Then you've also separated the logic from the markup in the form of an event handler.

Hopefully this makes more sense.