以html格式提交隐藏字段

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 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中初始化表单时对hide元素执行一些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操作?

2 个解决方案

#1

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

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

17.13.2 Successful controls

17.13.2成功控制

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.

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

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.

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

For menus, the control name is provided by a SELECT element and values are provided by OPTION elements. Only selected options may be successful.

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

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.

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

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.

重置按钮。已设置declare属性的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回服务器。

#2

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

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

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

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

你能给出一个更完整的例子,包括表格标签和一些输入吗?

#1