以 html 表单提交隐藏字段

Question

对于一个基本的 HTML 表单，我想将表单分成三个选项卡，每个选项卡将包含某些字段，并且在提交表单时我希望三个表单中的所有数据都能提交。

所以我有一个由<ul> 和<li 创建的菜单>

<ul class="subnav">
    <li class="subnav0 current"><a href="javascript:showTab('tab1');">Tab1</a></li>
    <li class="subnav1"><a href="javascript:showTab('tab2');">Tab2</a></li>
    <li class="lastItem subnav2"><a href="javascript:showTab('tab3');">Tab3</a></li>
</ul>

在这个菜单下面，我有三个 div 代表每个选项卡：

<div class="tab1"></div>
<div class="tab2 displayNone"></div>
<div class="tab3 displayNone"></div>

输入控件元素将被放入每个选项卡 div 中。并且菜单导航栏中的 javascript 将通过调用每个 div 的 show() 和 hide() 方法来控制显示哪个选项卡。 （使用 jQuery）。

现在我的问题是：

1) 我希望能够提交整个表单（三个 div 内的所有控件）。但是，html 表单不会在 displayNone div 中提交输入控件，这意味着我只能在当前正在查看的选项卡中提交数据，而不能在其他两个选项卡中提交。

2) 我还想在 tab2 或 tab3 中初始化表单时对隐藏元素执行一些 javascript 函数。但是，由于它们是 display:none，因此 javascript 不会有任何效果。

那么有什么方法可以隐藏 div，但也可以提交表单并对其进行任何 javascript 操作？

Answer 1

根据W3C display:none 控件可能仍会发送到服务器，因为它们被认为是成功的控件

17.13.2 成功控制

成功的控件对于提交是“有效的”。每一个成功的 控件的控件名称与其当前值配对，作为 提交的表单数据集。必须定义成功的控件 在 FORM 元素中，并且必须有一个控件名称。

但是：

• 禁用的控件无法成功。
• 如果一个表单包含多个提交按钮，只有激活的 提交按钮成功。
• 所有“打开”复选框可能是 成功。
• 对于共享相同值的单选按钮 name 属性，只有“on”单选按钮可能是 成功。
• 对于菜单，控件名称由 SELECT 元素和值由 OPTION 元素提供。仅有的 选定的选项可能会成功。
• 当没有选项时 选中，控件不成功，名称也没有 表单提交时，任何值都会提交给服务器 已提交。
• 文件选择的当前值是一个列表 一个或多个文件名。提交表格后，内容 每个文件都与其余的表单数据一起提交。文件 内容根据表单的内容打包 输入。
• 对象控件的当前值由下式确定 对象的实现。

如果控件没有当前值

当表单提交时，用户代理不需要处理它 作为一个成功的控制。

此外，用户代理不应考虑以下控件 成功：

重置按钮。已设置声明属性的 OBJECT 元素。 隐藏控件和因样式未渲染的控件 工作表设置可能仍然成功。

例如：

<FORM action="..." method="post">
<P>
<INPUT type="password" style="display:none"  
          name="invisible-password"
          value="mypassword">
</FORM>

仍然会导致值与名称配对 “invisible-password”并与表单一起提交。

无论如何，如果这似乎不起作用，为什么不在每个表单上尝试 jQuery serialize() 或 serializeArray() 并将值连接起来并将它们 ajax 回服务器。

Answer 2

关于您的第一点，仅仅因为输入显示无，并不意味着它不会提交这些字段。

关于你的第二点，我不太理解。您是说当您打开其中一个选项卡时，您想对内容执行一些操作吗？如果是这样，那么 JQuery UI 允许您这样做：-

http://jqueryui.com/demos/tabs/#event-show

能否举一个更完整的例子，包括表单标签和一些输入？