在display:none元素中提交表单字段

Nic*_*rie 71 javascript css forms

我有一个很长的形式,我已经分成6个步骤.加载表单时,将加载所有步骤,但只能看到第一步.其余的都有CSS,display:none所以它们是隐藏的.当步骤完成并使用Javascript验证时,当前步骤设置为display:none并且新步骤设置为display:block.在最后一步,用户提交表单.但是,正如预期的那样,只display:block提交页面上元素中的字段.元素中的所有已完成字段都将display:none被忽略.

有没有办法提交display:none元素内的字段?

如果没有,还有另一种方法可以达到同样的效果吗?

ada*_*101 157

将它们设置为visibility:hidden,position:absolute而不是.这些字段不会发送到服务器display:none,但会随之发送visibility:hidden.通过将"位置"切换为"绝对",您应该获得相同的视觉效果.

更新这在任何当前浏览器中都不再是问题(截至2015年11月).即使显示设置为"无",也会提交字段.但是,"已禁用"的字段将继续不提交.

  • 这在任何当前浏览器中似乎都不是问题.即使显示设置为"无",也会提交字段.但是,"已禁用"的字段将继续不提交. (25认同)
  • IE8(惊喜!)仍然存在发布设置为`display:none;`的字段的问题.如果该字段在其上放置了另一个HTML元素,则会出现同样的问题. (3认同)
  • @Pacerier,是'禁用'可以防止提交值,但在某些旧版浏览器中,`display:none`也会产生这种效果.请记住,此答案是在4年前发布的,仅适用于需要为这些旧版浏览器开发的开发人员. (2认同)
  • 它是1月20日并使用最新版本的chrome和Firefox但仍然无法发布早期加载时隐藏的字段 (2认同)
  • Chrome 49在这里可以确认在display:none中提交输入元素无效。 (2认同)

eli*_*xon 7

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

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

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

  • 程序员无法告诉访问者也使用哪种浏览器,我在最新的 Firefox 中也遇到了同样的问题。尝试显示:无或可见性:隐藏但都不起作用。 (4认同)