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

您不能拥有嵌套表单（source），因此无法使用。

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

Answer 3

很晚了，但是您可以这样做：

id

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

Answer 4

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

Answer 5

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

你可以使用Javascript的DOM函数解决这个问题，从form1中取出form2，将它放入正文，提交并将其放回form1。

编辑：这也不是100％正确，因为它仍然有嵌套表格。正如一些答案所指出的那样，你必须有两种不同的形式。你仍然可以使用DOM魔术，但还有几个转弯 - 。看看Randolpho的回答。

Answer 6

我认为用户界面可能存在此问题。如果只提交/保存单个表格的一部分（似乎是），那对用户来说会非常困惑。

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

Answer 7

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

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

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

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

哦，我相信你有充分的理由这样做，因为对我来说这听起来很可疑，因为糟糕的可用性： - ）

Answer 8

我通过在表单中添加多个提交按钮来解决这个问题。这些按钮引用了不同的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>

Answer 9

这是确定的工作答案。我不需要创建额外的父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>

在较大的</form>中嵌入HTML <form>

9 个答案: