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!

Answer 1

Change button's "submit" name to something else. That causes the problem. See dennisjq's answer at: http://forum.jquery.com/topic/submiting-a-form-programmatically-not-working

See the jQuery submit() documentation:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

Answer 2

I use $("form")[0].submit()

here $("form") returns an array of DOM elements so by accessing the relevant index we can get the DOM object for the form element and execute the submit() function within that DOM element.

Draw back is if you have several form elements within one html page you have to have an idea about correct order of "form"s