Javascript 以 html 表单提交隐藏字段

Submit hidden fields in a html form

提问by Yudong Li

For a basic HTML form, I would like to seperate the form into three tabs, each tab will contain certain fields, and when submit the form I wish all data in the three forms will be able to submit.

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

So I have a menu created by <ul>and <li>

所以我有一个由<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>

and below this menu, I have three divs that represent each of the tab:

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

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

The input controls elements will be put into each of the tab divs. And the javascript in the menu nav bar will control which tab to display by call show()& hide()method of each div. (Using jQuery).

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

Now my problem is:

现在我的问题是：

1) I want to be able to submit the whole form (all controls within three divs). However, html forms won't submit input controls within a displayNone div, which means I will only be able to submit the data within the tab which I am currently viewing but not the other two tabs.

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

2) I also want to do some javascript functions on hide elements when initialize the form in tab2 or tab3. However, since they are display:none, the javascript will not have any effect.

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

So is there any way that I can somehow hide the div, but also be able to submit the form and do any javascript operation on it?

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

回答by Daniel Powell

According to the W3Cdisplay:none controls may still be sent to the server, as they are considered successsful controls

根据W3C显示：没有控件仍可能被发送到服务器，因为它们被认为是成功的控件

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.

17.13.2 成功的控制

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

然而：

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

If a control doesn't have a current value

如果控件没有当前值

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.

提交表单时，用户代理不需要将其视为成功的控件。

此外，用户代理不应认为以下控制成功：

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

For example:

例如：

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

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

In any case if that doesnt seem to be working why not try jQuery serialize()or serializeArray()on each form and concatenate the values and ajax them back to the server.

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

回答by user1545858

On your first point, just because an input is display none, doesn't mean that it will not submit those fields.

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

On your second point, I don't quite follow. Are you saying that when you open one of the tabs, you want to do some action on the content? If so, then JQuery UI allows you to do this:-

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

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

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

Can you give a more complete example, including the form tag and some inputs?

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