防止表单内的表单被提交

Question

我正在创建一个包含许多输入字段的巨大表单向导.这些字段是内部的部分,display: none;通过单击按钮,我正在遍历各个部分,最后我正在提交表单.在一个部分中,有另一个表单通过ajax上传图像.要使用ajax,我需要阻止提交表单event.preventDefault(); 但这会导致提交父母表单.我怎样才能阻止提交父母表格呢？html结构如下所示:

<form action="" id="wizard">
  <section id="sec1"></section>
  <section id="sec2">
    <form id="ajaxform">
      <input type="file" id="ajaxfile">
      <input type="submit" value="upload">
    </form>
  </section>
  <section id="sec3"></section>
  <button type="button">Back</button>
  <button type="button">Next</button>
</form>

jQuery看起来像这样:

$(document).ready(function() {
   $('#ajaxform').submit(function(e) {
      e.preventDefault();
      $.ajax({stuff...});
   });
});

Answer 1

event.preventDefault()防止事件的默认行为,但不会阻止它冒泡到其他元素.使用event.stopPropagation():

防止当前事件在捕获和冒泡阶段进一步传播.

表格不应该嵌套.未指定此类无效标记的行为.你应该修复标记.

如果由于某种原因,您无法更改标记,那么您可以将该submit事件用于外部表单,并检查是否存在允许或禁止提交的某些值.例如,在最后一个部分中有一个隐藏值,只有当它们到达该部分时才显示(显示时).