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

Posted

技术标签:

【中文标题】在更大的 <form> 中嵌入 HTML <form>？【英文标题】：Embed an HTML <form> within a larger <form>? 【发布时间】：2010-12-18 01:22:18 【问题描述】：

我想将一个 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 中的所有内容。）这样可以吗？

【问题讨论】：

为什么需要这个？有两个单独的表格有什么问题？ 如果您提供更多关于您正在尝试做的事情的详细信息，我相信我自己和其他人会很乐意提出替代解决方案。 ***.com/q/555928/684229 的副本？ Can you nest html forms?的可能重复 【参考方案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>

【讨论】：

【参考方案2】：

您不能有嵌套表单 (source)，所以这不起作用。

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

【讨论】：

【参考方案3】：

一个可能的解决方案：不要使用嵌套表单，而是向 form2 按钮添加一个 onClick 事件，该按钮将调用一个 JS 方法，该方法可以从 form1 获取您的特定项目（在本例中为 val2 输入）并使用 AJAX 或简单地使用 xmlHTTPRequests( ) 来执行所需的 POST 方法。

【讨论】：

【参考方案4】：

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

  <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()">

已添加输入标签中的“表单”元素以解决无法嵌套表单的问题。

【讨论】：

w3.org/TR/html52/…【参考方案5】：

正如其他人所说，您不能嵌套表单元素。我处理此类事情的方式是使用单个表单，然后使用字段集对元素进行分组。然后，您可以使用 javascript 向提交按钮添加事件并启用/禁用应提交的输入字段。

使用 jQuery、MooTools 或任何其他框架，这将非常简单。但是，如果客户端禁用脚本，它将中断。

MooTools 解决方案可能如下所示：

$('submit2').addEvent('click', function (e) 
    e.stop();
    $$('#fieldset1 input').set('disabled', 'disabled');
    $('form').submit();
    $$('#fieldset2 input').set('disabled', '');

哦，我相信你有充分的理由这样做，因为在我看来，这听起来像是糟糕的可用性:-)

【讨论】：

【参考方案6】：

我认为用户界面可能存在问题。如果仅提交/保存单个表单的一部分（看起来是），那么用户会非常困惑。

而不是嵌套表单，如前所述，它是无效的，我认为您可能需要考虑实现一些 AJAX 调用来更新数据子集。

【讨论】：

【参考方案7】：

这是确定的工作答案。我不需要创建额外的父 DIV 并将其命名为 id="place_here"。命名一个表格单元格 id="place_here" 并使其成为 DIV id="div_2" 的父级就足够了。 这是一个很棒的小工作。另一个线程上的某人帮助我解决了这个问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>
<title>test / crtp</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function () 
    position_mdiv()();
    $(window).resize(function() 
        position_mdiv();
    );
)

function position_mdiv()

    var pos = $('#place_here').position();
    var width = $('#place_here').outerWidth();

    $('#div_2').css(
    position: "absolute",
    top: pos.top +2 + "px",
    left: (pos.left -300 + width) + "px"
);



</script>
<body>

<form id="CTRP_Form">
<table border="1">
<tr>
<td>
<div id="div_1"><input id="fnam" name="fnam" form="CTRP_Form" type="text"><input type=submit></div>
</td>
<td id="place_here" style="background:yellow;width:300px;padding:0px;border:solid 2px #CCC"></td>
</tr>
</table>
</form>


<div id="div_2"><form id="query_Form"><input id="MyQuery" name="MyQuery" form="query_Form" type="text"><input type=submit></form></div>

</body>
</html>

【讨论】：

【参考方案8】：

我通过在表单中​​有多个提交按钮解决了这个问题。这些按钮引用了不同的 CGI，并带来了我在 CGI 中处理条件处理所需的附加字段。

代码 sn-p

<form name="ep" method="put" action="/cgi-bin/edit_plan.pl">
   [...] 
   <tr>
      <td><input type="text" size="20" value="red" name="RN0"></td>
      <td><input type="text" size="3" value="2" name="RT0"></td>
      <td><input type="submit" value="Set row 0" name="RUN0"></td>
   </tr>
   [...] Add as many rows as needed, increment the 0 in all places Add an ending submit for overall processing instead of row processing: <input type="submit" value="Set ALL" name="SET"> 
</form>

【讨论】：

你有可以与 OP 分享的 sn-p 吗？ 目标的perl脚本edit_plan.pl解析提交的名称来控制put的处理方式：
[...] [...] 根据需要添加尽可能多的行，在所有位置增加 0为整体处理而不是行处理添加结束提交：
【参考方案9】：

这是无效的，根据我的经验会产生任意结果。

您可以使用 Javascript 的 DOM 函数解决此问题，将 form2 从 form1 中取出，将其放入 body，提交并放回 form1。

编辑：这也不是 100% 正确的，因为它仍然有嵌套的表单。正如一些答案所指出的那样，您必须有两个单独的表格。您仍然可以使用 DOM 魔法来执行此操作，但需要多转几圈 - 。请参阅 Randolpho 的回答。

【讨论】：

以上是关于在更大的 <form> 中嵌入 HTML <form>？的主要内容，如果未能解决你的问题，请参考以下文章

ToolStripMenuItem 更大的垂直填充，或在更大的 ToolStripMenuItem 中垂直居中文本

Python - 检查字符串是不是在更大的字符串中

告别微软加入 Linux 基金会，SONiC 在更大的开源生态中展翅高飞

在更大的数据表上为每个用户选择第一行/最后一行的 SQL 性能

如何获得在更大矩阵上训练的 SVM 以对不同大小的矩阵进行分类

用java在图片中查找图片？