Send form fields inside display: none element

Question

I have a long form, which I broke into 6 steps. When the form is loaded, all steps are loaded, but only the first step is displayed. The rest have CSS display:none , so they are hidden. Upon completion and verification of the step using Javascript, the current step is set to display:none , and the new step is set to display:block . In the last step, the user submits the form. However, as expected, only the fields in the display:block element on the page are represented. All filled fields in elements with display:none ignored.

Is there a way to send fields inside display:none elements?

If not, is there any other way to achieve the same effect?

Answer 1

Set visibility:hidden and position:absolute instead. Fields will not be sent to the server with display:none , but will be with visibility:hidden . Also, switching "position" to "absolute", you should get the same visual effect.

Update . This does not seem to be a problem in any current browser (as of November 2015). Fields are sent even if the display is set to no. However, fields that are “disabled” will still not be presented.

Answer 2

Just to add something to the answer above. If you want to use slideDown() - before setting the css element as follows:

 $('element') .css({ display: 'none' position: 'relative', visibility: 'visible' }) .slideDown(); 

And slideDown() will work fine. You can use the same logic for slideUp() .