在 display:none 元素中提交表单域

Question

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

有没有办法提交 display:none 元素中的字段？

如果没有，是否有另一种方法可以达到同样的效果？

原文由 Nick Petrie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将它们设置为 visibility:hidden 和 position:absolute 代替。这些字段不会通过 display:none visibility:hidden 到服务器。通过同时将“position”切换为“absolute”，您应该会获得相同的视觉效果。

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

原文由 adam0101 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

因此，如果浏览器忽略 display:none 那么它就不是完全支持 HTML 的。我建议切换到真正的浏览器。

原文由 elixon 发布，翻译遵循 CC BY-SA 4.0 许可协议