在 display:none 元素内提交表单字段 [英] Submit form fields inside display:none element
问题描述
我有一个很长的表格,我把它分成了 6 个步骤.当表单被加载时,所有的步骤都被加载,但只有第一步是可见的.其余的具有 display:none
的 CSS,因此它们是隐藏的.当一个步骤完成并使用 Javascript 验证时,当前步骤设置为 display:none
,新步骤设置为 display:block
.在最后一步,用户提交表单.但是,正如预期的那样,仅提交页面上 display:block
元素中的字段.元素中带有 display:none
的所有已完成字段都将被忽略.
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.
有没有办法提交 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?
推荐答案
改为将它们设置为 visibility:hidden
和 position:absolute
.这些字段不会以 display:none
发送到服务器,而是以 visibility:hidden
发送.通过将位置"切换为绝对",您应该获得相同的视觉效果.
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.
更新 这在当前的任何浏览器中似乎都不再是问题(截至 2015 年 11 月).即使将显示设置为无",也会提交字段.但是,禁用"的字段将继续不被提交.
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.
这篇关于在 display:none 元素内提交表单字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!