php - 在选项卡式表单中间添加额外(嵌套)表单的最佳方法

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

输入类型“button”的原因是页面上生成的按钮看起来与提交按钮一模一样，但默认情况下单击时不执行任何操作，允许您自定义其效果。此外，所有支持 HTML 3.2 或更高版本的浏览器都支持输入类型“按钮”including 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;" />
<!-- ... -->

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

添加此代码:

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