在较大的<form>内嵌入HTML <form>？

我想有嵌入另一种形式，像这样的HTML表单：在较大的<form>内嵌入HTML <form>？

<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>

我需要提交Form 1的全部，但是当我提交窗口2我只是想在窗口2提交数据（而不是在一切form1。）这会工作吗？

来源

2009-11-18 MikeN

为什么需要这个？有两种不同的形式有什么不对？ – 2009-11-18 20:56:00

如果你提供更多关于你想要做什么的细节，我肯定我和其他人会很乐意提出替代解决方案。 – 2009-11-18 20:56:29

重复的http://stackoverflow.com/q/555928/684229？ – TMS 2013-04-11 17:07:30

你所描述的将不起作用。

一种解决方法是创建两个不嵌套的表单。您将使用原始父窗体的隐藏输入来复制原始嵌套窗体的输入。然后，在允许表单提交之前，使用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>

来源

2009-11-18 20:57:30 Randolpho

你不能有嵌套窗体（source），所以这不会工作。

每个表单都必须包含在FORM元素中。可以有几种形式单一文件，中但FORM元素不能嵌套

来源

2009-11-18 20:53:58

这不是有效的，并会在我的经验产生任意性的结果。

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

编辑：这也不会100％正确，因为它仍然有嵌套的形式。正如一些答案指出的那样，你必须有两种独立的形式。你仍然可以使用DOM魔术来做到这一点，但还需要再花几个回合 - 请看Randolpho的回答。

来源

2009-11-18 20:54:46

我认为这可能是UI的问题。如果只有部分（似乎是）单个表单被提交/保存，那么对于用户来说会非常困惑。

而不是嵌套形式，如上所述，这是无效的，我认为你需要看看可能实现一些AJAX调用，而不是更新数据的子集。

来源

2009-11-18 20:56:40

一个可能的解决方案：除了具有嵌套形式，添加一个onClick事件到Form2按钮，将调用JS方法可以从form1中获取特定项目（在本例中为val2输入），并使用AJAX或简单的xmlHTTPRequests（）来执行所需的POST方法。

来源

2009-11-18 20:59:25 Freddy

正如其他人所说，你不能嵌套表单元素。我会处理这样的事情的方式是使用单个表单，然后用fieldset将这些元素分组。然后，您可以使用javascript将事件添加到提交按钮，并启用/禁用应提交的输入字段。

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

一个MooTools的解决办法是这样的：

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

哦，我相信你有一个很好的理由这样做，因为对我来说这听起来很像坏可用性:-)

来源

2010-05-05 14:25:42 AHM

-2

这里是最终的工作答案。我不需要创建一个额外的父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>

来源

2013-03-10 17:15:52 JTJohnston

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

代码片断

<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>

来源

2018-01-28 16:54:39

你有一个片段，你可以与OP分享？ – Daniel 2018-01-28 17:14:19

作为目标的perl脚本edit_plan.pl解析提交的名称以控制put的处理方式： – 2018-02-22 01:28:02

– 2018-02-22 01:45:14

在较大的<form>内嵌入HTML <form>？

回答

相关问题