html - 在更大的 <form> 中嵌入 HTML <form>？

Question

我想将一个 HTML 表单嵌入到另一个表单中，如下所示:

<form id="form1">
  <input name="val1"/>
  <form id="form2">
    <input name="val2"/>
    <input type="button" name="Submit Form 2 ONLY">
  </form>
<input type="button" name="Submit Form 1 data including form 2">
</form>

我需要提交整个 form1，但是当我提交 form2 时，我只想提交 form2 中的数据(而不是 form1 中的所有数据)。这行得通吗？

Answer 1

您所描述的将不起作用。

一种解决方法是创建两个未嵌套的表单。您将为原始父表单使用隐藏输入，以复制原始嵌套表单中的输入。然后使用 Javascript/DOM 操作将提交事件挂接到“父”表单上，在允许表单提交之前将“嵌套”表单中的值复制到“父”表单中的隐藏输入中。

您的表单结构看起来像这样(忽略布局 HTML):

<form id="form1">
  <input name="val1"/>
  <input name="val2" type="hidden" />
  <input type="button" name="Submit Form 1 data including form 2" 
         onsubmit="return copyFromForm2Function()">
</form>
<form id="form2">
  <input name="val2"/>
  <input type="button" name="Submit Form 2 ONLY">
</form>