在选项卡式表单中间添加额外（嵌套）表单的最佳方法

Question

我有一个网络应用程序，主要由一个包含信息的大表单组成。该表单分为多个选项卡，以使其对用户更具可读性：

<form>
<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
  </ul>
  <div id="tab1">A big table with a lot of input rows</div>
  <div id="tab2">A big table with a lot of input rows</div>
</div>
</form>

该表单是动态扩展的（额外的行添加到表中）。 每 10 秒表单就会被序列化一次并与服务器同步。

我现在想在其中一个选项卡上添加一个交互式表单：当用户在字段中输入名称时，此信息将发送到服务器，并返回与该名称关联的 id。此 id 用作某些动态添加的表单字段的标识符。

此类页面的快速草图如下所示：

<form action="bigform.php">
<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
  </ul>
  <div id="tab1">A big table with a lot of input rows</div>
  <div id="tab2">
    <div class="associatedinfo">
    <p>Information for Joe</p>
    <ul>
      <li><input name="associated[26][]" /></li>
      <li><input name="associated[26][]" /></li>
    </ul>
    </div>

    <div class="associatedinfo">
    <p>Information for Jill</p>
    <ul>
      <li><input name="associated[12][]" /></li>
      <li><input name="associated[12][]" /></li>
    </ul>
    </div>
    <div id="newperson">
      <form action="newform.php">
        <p>Add another person:</p> 
        <input name="extra" /><input type="submit" value="Add" />
      </form>
    </div>
  </div>
</div>
</form>

上面的内容不起作用：HTML 中不允许嵌套表单。但是，我确实需要在该选项卡上显示表单：它是该页面功能的一部分。我还想要单独表单的行为：当用户在表单字段中点击回车键时，按下“添加”提交按钮，并在部分表单上触发提交操作。

解决这个问题的最佳方法是什么？

Answer 1

您可以做的一件事是将“Add”输入元素的类型设置为“submit”，而是将其设置为“button”并添加用于注册点击处理程序的 id 属性：

<!-- ... -->
    <div id="newperson">
      <p>Add another person:</p> 
      <input id="extra_input" name="extra" /><input id="add_button" type="button" value="Add" />
    </div>
<!-- ... -->

原因对于输入类型“按钮”，页面上生成的按钮看起来与提交按钮完全相同，但默认情况下单击时不执行任何操作，允许您自定义其效果。此外，所有支持 HTML 3.2 或更高版本的浏览器都支持输入类型“button”包括 HTML 5。

在 Javascript 中的某个位置，您可能有一个希望在用户单击“添加”按钮时调用的函数。假设它被称为 addAnotherPerson，您只需在点击处理程序中调用 addAnotherPerson：

// This is jQuery code, but all JS frameworks that I have seen have a similar feature to register a click handler on a DOM element referenced by ID.
$("#add_button").click(function (event) {
    addAnotherPerson();
    $("#extra_input").val(""); // reset the value
});

您还需要向“额外”文本输入添加一个 keydown 处理程序以执行相同的操作当用户按下 Enter 键时：

$("#extra_input").keydown(function (event) {
    if (event.keyCode == 0xa || event.keyCode == 0xd) {
        addAnotherPerson();
        $("#extra_input").val(""); // reset the value
    }
});

请务必将属性 autocomplete="off" 添加到“额外”文本输入。

addAnotherPerson 函数可以发送一个异步 POST 请求，其中包含“extra”文本框中的值，然后在适当的情况下更新 DOM。

编辑：如果您还想支持禁用 Javascript 的用户，则可以向每个提交按钮添加具有唯一 name 属性值的 name 属性对于每个按钮，您的服务器端应用程序将能够知道用户单击了哪个按钮。

例如，以下代码来自 http://www.alanflavell.org.uk/www /trysub.html：

<table>
<tr><td align=left><label for="aquavit_button"><input id="aquavit_button" type="submit" name="aquavit" value="[O]"> Aquavit</label></td></tr>
<tr><td align=left><label for="beer_button"><input id="beer_button" type="submit" name="beer" value="[O]"> Beer</label></td></tr>
<tr><td align=left><label for="champagne_button"><input id="champagne_button" type="submit" name="champagne" value="[O]"> Champagne</label></td></tr>
<tr><td align=left><label for="water_button"><input id="water_button" type="submit" name="water" value="[O]"> Dihydrogen monoxide</label></td></tr>
</table>

如果用户单击“啤酒”旁边的“[O]”按钮，则浏览器会发送“啤酒”POST 变量，而不是“aquavit”、“香槟”或“水”POST 变量。尝试一下 http://www.alanflavell.org.uk/www/trysub.html 。

此技术的一个棘手问题是用户通过在文本输入中按 Enter 键来提交表单的情况。 Firefox 为表单中的第一个提交按钮（本例中为“aquavit”）发送 POST 变量，而 Internet Explorer 不会为任何提交按钮发送 POST 变量。您可以通过在表单的最开头添加一个隐藏的无名提交按钮来修补此差异：

<form action="bigform.php"><input type="submit" style="display:none;" />
<!-- ... -->

EDIT2: 如果您始终确保“额外”文本输入中的值被 Javascript 清除在提交大表单之前，您将能够判断用户是否禁用了 Javascript，并且他们在“额外”文本输入中按 Enter 键（表明他们想要添加-通过检查“额外”POST 变量在服务器端是否不为空来运行）。如果它不为空，那么您可以假设用户禁用了 Javascript 并且他们想要添加一个人。

添加此代码：

$("#bigform").submit(function (event) {
    $("#extra_input").val(""); // reset the value in the "extra" text input
    return true;
});

Answer 2

HTML 应该是语义化的，并且应该首先考虑它 - 即它应该具有清晰的结构和含义，而无需了解 javascript 位于之上。就像

应仅包含
• 元素一样，
  
  应仅具有单一用途。使用 javascript 通过检索动态数据来增强表单很好，但是如果使用额外的 HTTP POST（修改服务器上的数据的类型），那么这实际上代表了第二个目的，因此应使用第二种形式。第二种形式具有自己的“action”属性，表示此处正在发生不同的行为，并且不仅在概念上更合理，而且在必要时更易于分析、调试或扩展。

<form id="bigform" action="bigform.php">
    <!-- Tabs here -->
</form>
<form id="newperson" action="newform.php">
   <input name="extra">
   <button type="submit" value="Add">
   <!-- Note also the use of <button> instead of <input> -->
</form>

重要的是您仍然可以在主窗体中实现所需的流程。在主窗体上，不要使用嵌套窗体，而是使用

。该字段集将充当新人表单的代理。这里的输入可以有一个 ID，但不应该有一个名称，因为它的值不应该与主表单一起提交。正如其他答案中已经提到的，按钮应该更改为“按钮”类型，而不是“提交”类型。

<form id="bigform" action="bigform.php">
    <!-- Tabs here -->
    <fieldset id="newpersonProxy">
        <input id="extra">
        <button type="button" value="Add">
    </fieldset>
</form>

现在通过 Javascript 不显眼地添加所需的行为，方法是：

1. 隐藏第二个表单，#newperson。
2. 通过绑定到 #newpersonProxy 内任何输入的 keyup 事件以及按钮的 click 事件来响应“提交”。对于 keyup 事件，请使用 event.which 而不是 event.keyCode，因为 jQuery 对此进行了规范化。您需要 event.which == 13 作为回车键。
3. 然后，在调用 $("#newperson").submit() 之前，将代理输入中的值复制到真实表单。

这有效地将序列化和发送数据的责任委托给第二种形式，允许将任何类型的逻辑附加到第二种形式，并与第一种形式解耦。

此外，由于首先考虑的是功能性 HTML，一个简单的调整就可以让表单在没有 Javascript 的情况下完美工作 - 只需使用 CSS 隐藏

，并使用 Javascript 显示它。如果关闭 Javascript，选项卡将分开，嵌套字段集将被隐藏，并且将显示第二个表单（并且功能齐全，只是不通过 AJAX）。

Answer 3

像下面这样的事情应该可以做到。

如果 JavaScript 被禁用，您将需要检测用户是否按下了“Add”submitButton：

$_POST["submitButton"] == "Add"


    <!-- other stuff goes here -->

    <div id="newperson">
        <p>Add another person:</p> 
        <input name="extra" id="extra" /><input name="submitButton" id="addPerson" type="submit" value="Add" />
    </div>
  </div>
</div>
</form>
<script>
    var extra = $("#extra"),
        addPerson = $("#addPerson").click(function(e){
        // val would be the new person's name, e.g., "David"
        var val = extra.val();
        // you will want to give the user some AJAXy feedback here.

        $.post(this.form.action, {"extra": val}, function(response){
            // rest the extra div.
            extra.val("");

            /* 'response' could look like:                             */
            // <div class="associatedinfo">
            //      <p>Information for David</p>
            //      <ul>
            //        <li><input name="associated[13][]" /></li>
            //        <li><input name="associated[13][]" /></li>
            //      </ul>
            //   </div>
            $(response).insertBefore("#newperson");

            // or 'response' could be json data, or whatever. I have a feeling
            // you know enough about jQuery to handle the response-data.  :-)

        });
        // prevent it from bubbling up.
        e.preventDefault();
    });

    extra.keydown(function(e){
        // submit the new person's name via ajax if enter is pressed.
        if(e.keyCode === 13){
            addPerson.click();
            e.preventDefault();
        }
    });
</script>

Answer 4

这并不像其他答案那么冗长，但是..

它应该非常简单;)

• 完全摆脱你的FORM标签
• 使用jQuery来获取输入字段值
• 当用户单击提交“a”元素时，看起来像提交按钮，它只是发出一个ajax请求，捕获输入字段的值。

不过，这里有一个示例，它显示了我所引用的格式的一点这保留了表单标签，是我使用 scriptaculous 库时的一个旧示例。这是 JS，它演示了一些结构。

如果您+1我并让我知道您喜欢这个答案，我将为您开发一个功能示例；）

干杯！
柯克

Answer 5

为什么不嵌套表单对象并在一个 php 代码中处理所有操作...

# have this form appended to the DOM via ajax/js when a link is clicked
<div id="newperson">
  <p>Add another person:</p> 
  <input type="text" name="associated[new][]" />
</div>

然后在后端使用 php 逻辑来创建关联（如果它是“新”的）：

foreach($_POST['associated'] as $obj) {
  if($obj == "new")
    // create a new record
  else
    // do your other processing
}

Answer 6

您可以将添加表单移出父表单并使用 CSS 隐藏它，然后，正如另一位海报所说，用具有正确 id 的按钮替换添加表单的提交按钮，最后，挂钩到输入上的两个 onkeypress ，然后单击按钮来模拟实际添加表单的提交。

<form action="bigform.php">

    ....

    <div id="newperson">
      <p>Add another person:</p> 
      <input name="extra" /><button value="Add"/>
    </div>
  </div>
</div>
</form>
<div style='display:none;'>
    <form action="newform.php" id='add_person_form'>
      <input id='add_person_name' />
      <input type="submit" id='add_person_submit' />
    </form>
</div>

<script>
$('#newperson input').keyup(function(e) {
    if(e.keyCode == 13) submitNewPersonForm();
});
$('#newperson button').click(function(e) {
    submitNewPersonForm();
});

function submitNewPersonForm() {
    // copy the content from the placeholder form
    $('#add_person_name').val($("#newperson input").val());
    // submit this form
    $("#add_person_form").submit();
}
</script>

据我所知，这应该可以完成您需要的一切，同时保留原始功能。

注意：#add_person_form 表单上实际上并不需要提交按钮，我只是将其保留在那里，以便您可以轻松查看我将表单“移动”到的位置。

Answer 7

我看到处理类似场景的方式是为“内部”表单创建一个模式页面，因此不需要嵌套。我不认为这种方法会严重阻碍页面的流动。

否则，通过 AJAX 提交“内部”表单或整个表单的其他建议也可以起作用。

Answer 8

您不需要嵌套表单，您可以使用另一个表单（非嵌套）并使用绝对定位将其放置在页面上的任何位置。无论如何，所有这些具有与用户输入的名称相关的 id 的动态控件的创建似乎非常复杂。如果您可以分享您可能试图解决的业务问题，也许我们可以有一个更简单的解决方案。

Answer 9

您可以使用 ajax 或在第一个表单之外创建其他表单，并使用绝对 DIV 层对其进行定位。

使用 javascript 可以轻松读取图层位置。首先，您将制作一个具有预定义高度的占位符，然后您可以在占位符上方显示表单。

<form>

...
  <div style='height: 300px;' class='placeholder'> ... </div>
</form>

<form>...<form>

您显示 .placeholder 所在的第二个表单