在display：none元素内提交表单字段

我有一个很长的表格，分为6个步骤。加载表单后，将加载所有步骤，但是只有第一步可见。其余的具有CSS，display:none因此它们是隐藏的。完成一个步骤并使用Javascript进行验证后，当前步骤将设置为display:none，新步骤将设置为display:block。在最后一步，用户提交表单。但是，正如预期的那样，仅display:block提交页面上元素中的字段。元素中所有完成的字段都将display:none被忽略。

有没有一种方法可以提交display:none元素内的字段？

如果没有，还有其他方法可以达到相同的效果吗？

javascript css forms

— 尼克·彼得里
source

您在哪个浏览器中看到此行为？浏览器似乎display: none在我所有的测试中都在容器内提交表单元素。

— tremby 2014年

Answers:

177

将它们设置为visibility:hidden和position:absolute。字段不会与一起发送到服务器display:none，而是与一起发送到服务器visibility:hidden。通过将“位置”切换为“绝对”，您应该获得相同的视觉效果。

更新在任何当前浏览器中（从2015年11月开始），这似乎不再是问题。即使显示设置为“无”，也会提交字段。但是，“禁用”的字段将继续不提交。

— 亚当0101
source

在任何当前浏览器中，这似乎都不是问题。即使显示设置为“无”，也会提交字段。但是，“禁用”的字段将继续不提交。

— adam0101 2012年

IE8（惊奇！）在设置为的发布字段方面仍然存在问题display:none;。如果该字段在其顶部放置了另一个HTML元素，则会发生相同的问题。

— 埃里克TöyräSilfverswärd

@Pacerier是的，可以disabled阻止提交值，但是在某些较旧的浏览器上，display:none也会产生这种效果。请记住，此答案发布于4年前，仅适用于需要针对那些较旧的浏览器进行开发的开发人员。

— adam0101

它是1月20日，使用最新版本的

— Chrome

Chrome 49在这里可以确认在display：none中提交输入元素无效。

— csvan 2016年

HTML4第17.13.2节明确指出，即使使用display：none的隐藏控件也可能对提交有效。

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

因此，如果浏览器忽略display：none，则它不完全支持HTML。我建议切换为真正的浏览器。

— 埃利克森
source

程序员无法告诉访问者也使用了哪个浏览器，而我在最新的Firefox中也遇到了同样的问题。尝试显示：无或可见性：隐藏，但均无效。

— DonP

还有谁在这么多的网站上放置标语“是时候升级您的浏览器了”？;-）我知道了。您的意思不是说“程序员不能告诉访问者要使用的浏览器”，而是侵犯了表达自由……您可能的意思是“雇用了程序员”。好。我的帖子不是很有帮助，因为我只是想指出标准规定的正确行为是什么。而已。

— elixon

无论如何，我对可见性：隐藏（甚至显示：无）的评论都是胡说八道，因为我意识到在我的情况下，这是写入HTML标准的错误，或者是疏忽。如果未选中复选框，并且提交了表单，则好像没有该复选框。它不仅不提交任何内容（请使用双负数），而且完全不提交。

— DonP '19

因此，看起来它当时并不是某些古怪的，不兼容HTML的浏览器。案件结案。

— elixon