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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8318428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 05:33:06  来源:igfitidea点击:

Submit form fields inside display:none element

javascriptcssforms

提问by Nick Petrie

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:noneso they are hidden. As a step is completed and validated with Javascript, the current step is set to display:noneand 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:blockelement on the page are submitted. All the completed fields in the elements with display:noneare ignored.

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

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

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

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

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

回答by adam0101

Set them to visibility:hiddenand position:absoluteinstead. 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.

将它们设置为visibility:hiddenposition:absolute。这些字段不会用 发送到服务器display:none,但会用visibility:hidden。通过将“位置”切换为“绝对”,您应该获得相同的视觉效果。

UpdateThis 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 月)。即使将显示设置为“无”,也会提交字段。但是,“禁用”的字段将继续不被提交。

回答by elixon

The HTML4, section 17.13.2, says explicitly that even hidden controls using display:none may be valid for submission.

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

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

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

So if the browser ignores display:none then it is not fully HTML-capable. I recommend switching for a real browser.

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