Question

我有一个包含多个表单的PHP页面，其中一些表单提交给iframe（每个表单单独iframe）以允许类似ajax的文件上传。我不希望用户在选择每个文件后必须单击“提交”按钮，因此我在文件输入元素的.submit()事件内使用jQuery的.change()函数提交表单。

单个文件上传工作正常。

但是，在提交所有单个文件后，用户必须单击最终按钮，确认他们已查看显示的表单数据。最后一个按钮只是一个独立的按钮。它不是提交按钮，也不与任何表单相关联。页面最初加载时，此按钮工作正常。

但是，一旦为文件上传调用.submit()函数，最终按钮似乎绑定到另一个表单的操作。

粗略地说，页面的结构如下：

<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>

jQuery如下：

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

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

在完成提交最终草稿后，当我点击mainSubmitButton时，它会加载uploadFile.php。

有人知道为什么会这样，我能做些什么来纠正这个问题？

提前感谢您的帮助。凯特

Answer 1

从按钮单击返回“false”以取消任何默认行为。

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

Answer 2

之所以这样，我认为是因为您使用的元素按钮充当了提交按钮，而不像您希望的那样 - 就像常规按钮一样。只需将其切换到

即可

  <input type="button">

你应该全力以赴。

查看http://reference.sitepoint.com/html/button了解详情

参考implementation。

解除绑定表单使用jQuery提交到iframe

2 个答案: