如何最初隐藏表单，但在重新加载屏幕时呈现表单？答案

【问题标题】：how to hide a form initially, but render the form when the screen is reloaded?如何最初隐藏表单，但在重新加载屏幕时呈现表单？
【发布时间】：2017-08-14 19:52:24
【问题描述】：

我的屏幕上有一个表格。我想最初隐藏它。用户可以稍后启用它，输入值并提交表单。提交表单将更新屏幕。但这次我希望表格保持可见。我该怎么做？

下面的 javascript 最初会隐藏表单。

$(document).ready(function(){           

    document.getElementById( 'form1' ).style.display = 'none';          

});

以下脚本将提交表单。但是无论如何我可以确保表格在之后保持可见吗？我现在拥有的 'document.getElementById( 'form1' ).style.display = 'yes'' 不起作用。

function SubmitForm1(){ 

        document.getElementById("form1").submit();  
        document.getElementById( 'form1' ).style.display = 'yes'    

}

【问题讨论】：

display:none; 的反义词不是yes，而是inherit 或block 形式。并且您最好在其 HTML 标记中使用 style:"display:none" 设置表单，而不是将其隐藏在准备好的文档中。

标签： javascript jquery html django forms

【解决方案1】：

有两种简单的方法可以跨页面（在本地存储之外）保持状态。

首先是将信息放入您的表单网址中。前任。 http://localhost?loaded=true。然后，您可以使用 How can I get query string values in JavaScript? 之类的代码来检索值并调整表单的可见性。

第二种也是更常见的方法是将某种状态存储在您的服务器上，无论是在会话中还是在数据库等持久存储中。当您提供页面时，您可以使用您使用的任何服务器端模板语言来根据您保存的数据调整表单的可见性。

我会请您考虑是否应该重定向到表单可见的第二个页面，而不是在同一页面上操纵可见性。

【讨论】：

【解决方案2】：

“是”不是“显示”属性的有效属性。

通过将元素显示设置为“无”来思考您在做什么。您正在手动将元素的 css 设置为 .form { display: none;}。

如果您想保持代码不变，请尝试将 display 属性的值设置为有效属性。像“块”或“内联”。

但是，如果您使用的是 JQuery，我建议您在提交表单时“切换”所需的元素。喜欢：

document.getElementById( 'form1' ).toggle();

这会将显示从不可见切换到可见，反之亦然。

下面是显示属性的不同属性值的链接。 https://www.w3schools.com/cssref/pr_class_display.asp

【讨论】：