Question

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

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

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

Answer 1

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

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

Answer 2

只是为上面的答案添加一些东西。如果你想使用slideDown() - 就在它设置元素的css之前：

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

slideDown()可以正常使用。您可以对slideUp()使用相同的逻辑。

Answer 3

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

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

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

Answer 4

在许多旧浏览器中存在错误，其中“display:none”以奇怪的方式删除项目...例如 Webkit 2012 年之前的浏览器，其中“display: none”上说一个提交按钮，然后按“返回”，不会将表单字段数据提交到服务器。也有一些情况，在“隐藏”类型的输入字段中添加“display:none”以在旧的 IE 浏览器中隐藏它们无法将输入数据发送到服务器。

共识应该始终是不使用“display:none”来隐藏表单字段数据或任何通常不会显示的字段，但仍然需要通过屏幕阅读器看到，提交表单字段数据，或被搜索引擎阅读。当我真的想从页面中暂时删除某些内容但稍后再次启用它时，我只使用“display:none”。

下面是“display:none”的替代方案，它只是在视觉上对用户隐藏项目，并将其从页面流中完全删除，而不隐藏其内容或数据：

.hide {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    visibility: hidden !important;
}

Answer 5

如果您发现您的输入未与 display: none; 一起提交，并且您希望您的元素不占用空间，还有另一个选项，我在任何地方都没有提到。

它似乎有效，但前提是您的元素没有子元素。

display: contents;

检查浏览器支持，因为它是一个新的 CSS 功能。

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

5 个答案: