Question

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

所以我有一个由<ul>和<li＆gt;

创建的菜单

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

输入控件元素将被放入每个tab div中。菜单导航栏中的javascript将控制通过调用show()＆amp;每个div的hide()方法。（使用jQuery）。

现在我的问题是：

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

2）我还想在tab2或tab3中初始化表单时对hide元素执行一些javascript函数。但是，由于它们是display：none，因此javascript不会产生任何影响。

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

Answer 1

根据W3C显示：无法将任何控件发送到服务器，因为它们被视为成功控制

17.13.2成功控制

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

然而：


禁用的控件无法成功。

  如果表单包含多个提交按钮，则仅激活   提交按钮成功。

所有“打开”复选框可能是   成功。

对于共享相同值的单选按钮   name属性，只有“on”单选按钮可能

对于菜单，控件名称由a提供   SELECT元素和值由OPTION元素提供。只要   选定的选项可能会成功。

没有选项时   选中，控件不成功，既没有名字也没有   表单时，任何值都将提交给服务器

文件选择的当前值是列表   一个或多个文件名。提交表格后，内容   每个文件的提交与其余的表单数据一起提交。文件   内容根据表单的内容打包

对象控件的当前值由。确定   对象的实现。

如果控件没有当前值

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

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

重置按钮。已设置declare属性的OBJECT元素。   由于样式而未呈现的隐藏控件和控件   表格设置可能仍然成功。

例如：

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

仍会导致值与名称配对 “隐形密码”并随表单一起提交。

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

Answer 2

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

关于你的第二点，我不太关注。你是说当你打开其中一个标签时，你想对内容做一些动作吗？如果是这样，那么JQuery UI允许您这样做： -

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

您能提供更完整的示例，包括表格标签和一些输入吗？

以html格式提交隐藏字段

2 个答案: