在更大的<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>

Answer 2

您不能拥有嵌套表单(源),因此这不起作用.

每个表单都必须包含在FORM元素中.单个文档中可以有多个表单,但FORM元素不能嵌套

Answer 3

很晚了，但你可以这样做：

  <form id="form1"></form>
  <form id="form2"></form>
  <input ***form="form1"*** name="val1"/>
  <input ***form="form1"*** name="val2" type="hidden" />

  <input ***form="form2"*** name="val2"/>
  <input ***form="form2"*** type="button" name="Submit Form 2 ONLY">

  <input ***form="form1"*** type="button" name="Submit Form 1 data including form 2" 
         onsubmit="return copyFromForm2Function()">

添加了输入标记内的“form”元素，以解决无法嵌套表单的问题。