14

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

所以我有一个由<ul>and创建的菜单<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 操作？

4

2 回答 2

16

根据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 回服务器。

于 2012-09-17T04:27:31.773 回答
3

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

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

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

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

于 2012-09-17T04:29:09.090 回答