javascript - 在 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 将通过调用 show() 控制显示哪个选项卡。 & hide()每个div的方法。 (使用 jQuery)。

现在我的问题是:

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

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

那么有什么方法可以隐藏 div，同时又能提交表单并对其执行任何 javascript 操作吗？

Answer 1

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

17.13.2 Successful controls

A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.

However:

• Controls that are disabled cannot be successful.
• If a form contains more than one submit button, only the activated submit button is successful.
• All "on" checkboxes may be successful.
• For radio buttons that share the same value of the name attribute, only the "on" radio button may be successful.
• For menus, the control name is provided by a SELECT element and values are provided by OPTION elements. Only selected options may be successful.
• When no options are selected, the control is not successful and neither the name nor any values are submitted to the server when the form is submitted.
• The current value of a file select is a list of one or more file names. Upon submission of the form, the contents of each file are submitted with the rest of the form data. The file contents are packaged according to the form's content type.
• The current value of an object control is determined by the object's implementation.

如果控件没有当前值

when the form is submitted, user agents are not required to treat it as a successful control.

Furthermore, user agents should not consider the following controls successful:

Reset buttons. OBJECT elements whose declare attribute has been set. Hidden controls and controls that are not rendered because of style sheet settings may still be successful.

例如:

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

will still cause a value to be paired with the name "invisible-password" and submitted with the form.

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