115

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?

Jon
  • 2,932
  • 2
  • 23
  • 30
Nick Petrie
  • 5,364
  • 11
  • 41
  • 50
  • 13
    What browser did you see this behaviour in? Browsers seem to submit form elements within `display: none` containers in all my tests. – tremby Jun 09 '14 at 22:19

5 Answers5

220

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.

adam0101
  • 29,096
  • 21
  • 96
  • 174
  • Can I do this with jquery slideUp() and slideDown() ? – Nick Petrie Nov 29 '11 at 22:13
  • I'm not very familiar with jQuery. How is display:none being set right now? If you're doing it you should just be able to replace that code with code that sets the position and visibility. If it's hidden away in a framework you'll have to see if there is a way to override the behavior or find another work around. – adam0101 Nov 29 '11 at 22:32
  • no you cant do that with SlideDown, because at the end of the animation html item's 'display' will set to 'none' – siniradam Sep 25 '12 at 15:22
  • 30
    This does not appear to be an issue in any current browser. Fields are submitted even if display is set to 'none'. Fields that are 'disabled', however, will continue to not be submitted. – adam0101 Sep 26 '12 at 14:19
  • 3
    IE8 (surprise!) still has issues with posting fields that are set to `display:none;`. The same problem occurs if the field has another HTML element placed on top of it. – Erik Töyrä Silfverswärd Oct 31 '13 at 17:23
  • Just before submitting the form, set display: block to all elements. – Sarim Apr 10 '14 at 12:40
  • @adam0101, Why do you say that `display:none` stops the browser from submitting the value? It's [`disabled` that prevent submission](http://stackoverflow.com/a/1374188/632951) not `display:none` – Pacerier Jan 27 '15 at 05:53
  • 2
    @Pacerier, yes `disabled` prevents values from being submitted, but on some older browsers, `display:none` would also have this effect. Keep in mind that this answer was posted 4 years ago and is only applicable to developers that need to develop for those older browsers. – adam0101 Jan 27 '15 at 15:25
  • @adam0101, Which browsers were you referring to? – Pacerier Jan 30 '15 at 19:53
  • @Pacerier, it's been so long that I don't remember which browsers/versions specifically, but a simple google search shows it was a problem with **[Mozilla](https://bugzilla.mozilla.org/show_bug.cgi?id=34297)** and **[chromium](https://code.google.com/p/chromium/issues/detail?id=89586)** for sure, although I'm pretty sure there were issues with IE6, 7, and possibly 8 too. – adam0101 Feb 02 '15 at 18:57
  • This answer needs updating, not everyone checks all of comments if they are hidden. – Glen Nov 06 '15 at 16:40
  • 7
    It's 20th January and using latest versions of chromium and Firefox but still cannot post fields that were hidden earlier on load – Masinde Muliro Jan 19 '16 at 21:29
  • 6
    Chrome 49 here, can confirm that submitting input elements within display:none does NOT work. – csvan Apr 13 '16 at 15:07
  • 1
    @csvan, it works fine for me with Chrome 49 using this [jsfiddle](https://jsfiddle.net/r8kLajad/). I tried with the div inside and outside the `form` element. – adam0101 Apr 13 '16 at 16:02
  • Using this [jsfiddle](https://jsfiddle.net/r8kLajad/10/), you can see that newer Chrome 62 does not submit display:none contained field. – Mihai MATEI Dec 06 '17 at 10:05
  • Looks like there is not much agreement on which is the current behaviour. I personally just stumbled upon a case where Chrome (68.0.3440.106) submits a control hidden via ```display:none```. My two cents. – Kamafeather Aug 23 '18 at 16:33
  • 1
    7 years later, I'm seeing this exact same behaviour in Chrome v78. I have to remove the display:none from the container element for the elements to post. – Raj Parmar Nov 28 '19 at 12:47
  • 1
    The same issue right now (2021), does anyone know if there is a way to force the submit of inputs contained into a hidden (display: none) div? I can't change the display attribute to another like visibility without big changes. – SWeC Apr 09 '21 at 12:10
  • For input fields at least, the easiest way to handle different browser behaviors would be to set input type to "hidden". – KC Wong Apr 13 '23 at 04:23
7

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.

elixon
  • 1,123
  • 12
  • 15
  • 3
    A programmer can’t tell visitors which browser too use and I am having this same issue with the latest Firefox. Trying display:none or visibility:hidden but neither work. – DonP Feb 14 '19 at 09:31
  • 1
    In any event, my comment about visibility:hidden (and maybe even display:none) was nonsense as I realized that in my case it is a bug, or rather an oversight, written into the HTML standard. If a checkbox is unchecked and the form submitted, it’s as though it isn’t even there. It not only does not submit nothing (pardon the double-negative) but it does not submit at all. – DonP Feb 15 '19 at 02:23
  • So it looks like it was not some quirky non-HTML compliant browser then. Case closed. – elixon Jan 02 '20 at 16:46
  • lifesaver - didnt know they had updated that – Capagris Dec 16 '21 at 17:44
2

If you find that your input is not submitted with display: none; and you want your element to not occupy space there is another option which I do not see mentioned anywhere.

It seems to work, but only if your element has no children.

display: contents;

Check the browser support as it is a newish CSS feature.

Rui Marques
  • 8,567
  • 3
  • 60
  • 91
1

display:none - doesn't mean that form elements are not submitted (just not displayed)... They are submitted in the current version of Chrome, despite being hidden.

jxwd
  • 179
  • 2
  • 6
0

There are bugs in many older browsers where "display:none" removes an item in weird ways...like Webkit browsers pre-2012, where "display:none" on say a submit button, then pressing "return", would not submit the form field data to the server. There are also cases where "display:none" added to input fields of type "hidden" to hide them in old IE browsers fail to send that input data to the server.

The consensus should always be to NOT USE "display:none" to hide form field data or any field that is not normally displayed anyway, but which still needs to be seen by say a screen reader, submit form field data, or be read by search engines. I only use "display:none" when I truly want to remove something temporarily from the page but later enable it again.

Below is an alternative to "display:none" that just hides the item visually from the user and removes it completely from the page flow without hiding its content or data:

.hide {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    visibility: hidden !important;
}
Stokely
  • 12,444
  • 2
  • 35
  • 23