在显示中提交表单字段:无元素

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.

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

Is there a way to submit the fields inside the display:none elements?

是否有方法提交显示中的字段:无元素?

If not, is there another way to achieve the same effect?

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

2 个解决方案

#1

124

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.

设置他们的可见性:隐藏和位置:绝对代替。这些字段不会以display:none的形式发送到服务器，但将具有可视性:hidden。通过切换“位置”到“绝对”，你会得到同样的视觉效果。

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.

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

#2

Just to add something to the answer above. If you want to use slideDown() - just before it set the css of the element like this:

为了给上面的答案添加一些东西。如果您想要使用slideDown()——就在它设置元素的css之前:

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

And slideDown() will work just fine. You can use the same logic for slideUp().

而slideDown()将会工作得很好。对于slideUp()，您可以使用相同的逻辑。

#1

124