Question

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.

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

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.

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.

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?

Answer 1

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

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.

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.

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.

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.