我想将一个 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 中的所有内容。）这样可以吗？
【问题讨论】：
标签： html
您所描述的将不起作用。
一种解决方法是创建两个不嵌套的表单。您将为原始父表单使用隐藏输入，以复制原始嵌套表单中的输入。然后使用 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>
【讨论】：
您不能有嵌套表单 (source)，所以这不起作用。
每个表单都必须包含在一个 FORM 元素中。一个文档中可以有多个表单，但FORM元素不能嵌套
【讨论】：
一个可能的解决方案：不要使用嵌套表单，而是向 form2 按钮添加一个 onClick 事件，该按钮将调用一个 JS 方法，该方法可以从 form1 获取您的特定项目（在本例中为 val2 输入）并使用 AJAX 或简单地使用 xmlHTTPRequests( ) 来执行所需的 POST 方法。
【讨论】：
很晚了，但你可以这样做：
<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()">
已添加输入标签中的“表单”元素以解决无法嵌套表单的问题。
【讨论】：
正如其他人所说，您不能嵌套表单元素。我处理此类事情的方式是使用单个表单，然后使用字段集对元素进行分组。然后，您可以使用 javascript 向提交按钮添加事件并启用/禁用应提交的输入字段。
使用 jQuery、MooTools 或任何其他框架，这将非常简单。但是，如果客户端禁用脚本，它将中断。
MooTools 解决方案可能如下所示：
$('submit2').addEvent('click', function (e) {
e.stop();
$$('#fieldset1 input').set('disabled', 'disabled');
$('form').submit();
$$('#fieldset2 input').set('disabled', '');
}
哦，我相信你有充分的理由这样做，因为在我看来，这听起来像是糟糕的可用性:-)
【讨论】：
我认为用户界面可能存在问题。如果仅提交/保存单个表单的一部分（看起来是），那么用户会非常困惑。
而不是嵌套表单，如前所述，它是无效的，我认为您可能需要考虑实现一些 AJAX 调用来更新数据子集。
【讨论】：
这是确定的工作答案。我不需要创建额外的父 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>
【讨论】：
我通过在表单中有多个提交按钮解决了这个问题。这些按钮引用了不同的 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>
【讨论】：
这是无效的，根据我的经验会产生任意结果。
您可以使用 Javascript 的 DOM 函数解决此问题，将 form2 从 form1 中取出，将其放入 body，提交并放回 form1。
编辑：这也不是 100% 正确的，因为它仍然有嵌套的表单。正如一些答案所指出的那样，您必须有两个单独的表格。您仍然可以使用 DOM 魔法来执行此操作，但需要多转几圈 - 。请参阅 Randolpho 的回答。
【讨论】：