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事件用于外部表单，并检查是否存在允许或禁止提交的某些值。例如，在最后一个部分中有一个隐藏值，只有当它们到达该部分时才会更改（显示时）。

防止表单内的表单被提交

1 个答案: