Unbinding form submit to iframe with jQuery

Question

I have a PHP page with multiple forms, some of which submit to an iframe (separate iframe for each form) to allow for ajax-like file uploads. I don't want the user to have to click a "Submit" button after selecting each file, so I am submitting the form using jQuery's .submit() function inside of a .change() event on the file input element.

The individual file uploads work fine.

However, after all the individual files are submitted, the user must click on a final button that acknowledges they have reviewed the form data as displayed. This last button is just an independent button. It is not a submit button, and it is not associated with any form. When the page initially loads, this button works fine.

However, once the .submit() function is called for the file uploads, the final button seems to be bound to the other form's action.

Roughly, the structure of the page is as follows:

<form id="finalForm" target="finalTarget" action="uploadFile.php?action=final" method="post" enctype="multipart/form-data">
   <div id="finalSelect">
   <input type="file" name="finalDraft" id="finalDraft" value="file" />
   <input type="submit" value="Submit" id="finalSubmitButton" />
</form>
<iframe id="finalTarget" name="finalTarget" src="#" style="width:0px; height:0px; border: 0px"></iframe> 

<form id="signForm" target="signTarget" action="uploadFile.php?action=sign" method="post" enctype="multipart/form-data">
   <div id="signSelect">
   <input type="file" name="signPage" id="signPage" value="file" />
   <input type="submit" value="Submit" id="signSubmitButton" />
</form>
<iframe id="signTarget" name="signTarget" src="#" style="width:0px; height:0px; border: 0px"></iframe> 

<button type="button" id="mainSubmitButton">Submit</button>

the jQuery is as follows:

$("#mainSubmitButton").click(function(){
     document.location.href='pageName.php';
});

$("#finalDraft").change(function(){
     $("#finalForm").submit();
}

after doing a final draft submit, when I click on the mainSubmitButton it loads uploadFile.php.

Does anybody know why this is happening, and what I can do to correct the problem?

Thanks in advance for your help. Kate

Answer 1

Return "false" from the button click to cancel any default behaviour.

$("#mainSubmitButton").click(function(){
     document.location.href='pageName.php';
     return false;
});

Answer 2

the reason for this, I think is because the element button you used is acting as a submit button, not as you intended it to act - like a regular button. Just switch it to

  <input type="button"> 

and you should be all set.

check out http://reference.sitepoint.com/html/button for more info

Reference implementation.