Submit form fields inside display:none element

Question

I have a long form that I've broken up into 6 steps. When the form is loaded, all of the steps are loaded, but only the first step is visible. The rest have CSS of display:none so they are hidden. As a step is completed and validated with Javascript, the current step is set to display:none and the new step is set to display:block. On the final step, the user submits the form. However, as expected, only the fields in display:block element on the page are submitted. All the completed fields in the elements with display:none are ignored.

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

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

Answer 1

The HTML4, section 17.13.2, says explicitly that even hidden controls using display:none may be valid for submission.

https://www.w3.org/TR/html401/interact/forms.html

So if the browser ignores display:none then it is not fully HTML-capable. I recommend switching for a real browser.

Answer 2

Set them to visibility:hidden and position:absolute instead. The fields will not be sent to the server with display:none, but will be with visibility:hidden. By also toggling "position" to "absolute" you should get the same visual effect.

Update This does not appear to be an issue anymore in any current browser (as of Nov of 2015). Fields are submitted even if display is set to 'none'. Fields that are 'disabled', however, will continue to not be submitted.

Answer 3

Just to add something to the answer above. If you want to use slideDown() - just before it set the css of the element like this:

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

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