将 HTML <form> 嵌入到更大的 <form> 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1759006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Embed an HTML <form> within a larger <form>?
提问by MikeN
I want to have an HTML form embedded in another form like so:
我想在另一个表单中嵌入一个 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>
I need to submit the entirety of form1, but when I submit form2 I only want to submit the data in form2 (not everything in form1.) Will this work?
我需要提交整个 form1，但是当我提交 form2 时，我只想提交 form2 中的数据（而不是 form1 中的所有内容。）这行得通吗？
回答by Randolpho
What you have described will not work.
你所描述的将不起作用。
One workaround would be to create two forms that are not nested. You would use hidden inputs for your original parent form that duplicate the inputs from your original nested form. Then use Javascript/DOM manipulation to hook the submit event on your "parent" form, copying the values from the "nested" form into the hidden inputs in the "parent" form before allowing the form to submit.
一种解决方法是创建两个未嵌套的表单。您可以为原始父表单使用隐藏输入，这些输入与原始嵌套表单中的输入重复。然后使用 Javascript/DOM 操作在您的“父”表单上挂钩提交事件，在允许表单提交之前将“嵌套”表单中的值复制到“父”表单中的隐藏输入中。
Your form structure would look something like this (ignoring layout HTML):
您的表单结构看起来像这样（忽略布局 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>
回答by Marek Karbarz
回答by Freddy
A possible solution : Instead of having the nested form, add an onClick event to the form2 button which will call a JS method that could get your specific items (val2 input in this case) from form1 and using AJAX or simply xmlHTTPRequests() to perform the desired POST methods.
一个可能的解决方案：不要使用嵌套表单，而是向 form2 按钮添加一个 onClick 事件，该事件将调用一个 JS 方法，该方法可以从 form1 中获取您的特定项目（在本例中为 val2 输入）并使用 AJAX 或简单的 xmlHTTPRequests() 来执行所需的 POST 方法。
回答by AHM
As other people have said, you cannot nest form elements. The way I would handle something like this would be to use a single form and then group the elements with fieldsets. You can then add events to the submit buttons with javascript and enable/disable the input fields that should be submitted.
正如其他人所说，您不能嵌套表单元素。我处理这样的事情的方法是使用单个表单，然后使用字段集对元素进行分组。然后，您可以使用 javascript 向提交按钮添加事件，并启用/禁用应提交的输入字段。
With jQuery, MooTools or any other framework this would be very simple. It will break if the client disables scripts, though.
使用 jQuery、MooTools 或任何其他框架，这将非常简单。但是，如果客户端禁用脚本，它将中断。
A MooTools solution could look like this:
MooTools 解决方案可能如下所示：
$('submit2').addEvent('click', function (e) {
e.stop();
$$('#fieldset1 input').set('disabled', 'disabled');
$('form').submit();
$$('#fieldset2 input').set('disabled', '');
}
Oh, and I trust you have a good reason for doing this, because to me it sounds suspiciously like bad usability :-)
哦，我相信你这样做是有充分的理由的，因为对我来说这听起来像是糟糕的可用性:-)
回答by JTJohnston
Here is the definitive working answer. I didn't need to create an extra parent DIV and name it id="place_here". Naming a table cell id="place_here" and making it the parent to DIV id="div_2" was enough. This is a brilliant little work around. Someone on another thread helped me with this.
这是最终的工作答案。我不需要创建额外的父 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>
回答by David McGaughey
I resolved this by having multiple submit buttons in the form. The buttons reference different CGIs and brought along the additional fields that I needed to handle conditional processing in the CGIs.
我通过在表单中有多个提交按钮解决了这个问题。这些按钮引用了不同的 CGI，并带来了我在 CGI 中处理条件处理所需的附加字段。
Code snippet
代码片段
<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>
回答by Pekka
It's not valid and will in my experience produce arbitrary results.
它无效，根据我的经验会产生任意结果。
You could work around this using Javascript's DOM functions, taking form2 out of form1, putting it into the body, submitting it and putting it back into form1.
您可以使用 Javascript 的 DOM 函数解决此问题，从 form1 中取出 form2，将其放入正文，提交并放回 form1。
Edit: This won't be 100% right either, as it still has nested forms. As some of the answers point out, you have to have two separate forms. You can still do this using DOM magic but with a few more turns - .see Randolpho's answer.
编辑：这也不是 100% 正确，因为它仍然有嵌套的形式。正如一些答案指出的那样，您必须有两个单独的表格。您仍然可以使用 DOM 魔法来完成此操作，但需要多转几圈 - 参见 Randolpho 的回答。
回答by DA.
I think there may be issues with the UI for this. It'd be very confusing for a user if only part of (what appears to be) a single form was submitted/saved.
我认为用户界面可能存在问题。如果仅提交/保存了单个表单的一部分（似乎是），那么用户会感到非常困惑。
Rather than nesting forms, which, as stated, is invalid, I think you need to look at perhaps implementing some AJAX calls instead to update subset of data.
与其说嵌套表单是无效的，不如说嵌套表单是无效的，我认为您可能需要考虑实现一些 AJAX 调用来更新数据子集。
