表单提交页面刷新后显示隐藏的 div答案

【问题标题】：Show a hidden div after a form submit page refresh表单提交页面刷新后显示隐藏的 div
【发布时间】：2019-03-25 16:07:36
【问题描述】：

我有一个默认隐藏的 div result_head。每当我单击将提供选项以选择结果的按钮时，此隐藏的 div 将显示为表单的标题。

<div class="result_head" id="result_head" style="display: none"> >Results</div>

以及表单代码

<form method="post" id="form_result">

    <div class="form-group">    

    <-----some drop down menus here --------->

            <div class="form-group">

            <button type="submit" name="result_submit" id="result_submit"  style="display: none;margin:1%;" >Submit</button>

            </div>

        </form>

提交后和页面刷新后，我需要显示结果的标题。我尝试了不同的方法来实现，但没有任何运气。

尝试添加 onclick 和 onsubmit 函数以及表单提交

<button type="submit" name="result_submit" id="result_submit"  style="display: none;margin:1%;" onclick="document.getElementById('result_head').style.display = 'block';">Submit</button>

尝试将 php 中的 CSS 回显到 display_head。

<div class="result_head" id="result_head" style="display: none" <?php if (isset($_POST['result_submit'])){ echo 'style="display:block !important;"'; } ?> >Results</div>

还发现了一个在表单提交后通过 php 回显整个 div 的方法，该方法将在表单提交后创建新的 div。但是这个选项对我来说是不可行的，因为我还需要在提交之前显示头部。

另外，在研究一些解决方案时，发现了一个将按钮类型从sumbit 更改为button 并使用jquery\ajax 提交表单的选项。我可能需要为此更改整个代码。

还有其他方法吗？

【问题讨论】：

HTML 标记中的 style 属性不能有两倍

标签： javascript php jquery html css

【解决方案1】：

以下内容如何：

<div class="result_head" id="result_head" style="display: <?php echo ($_POST['result_submit'] ? 'block' : 'none') ?>">Results</div>

它只是在提交时将样式从none 更改为block。

【讨论】：

【解决方案2】：

提交表单后，您可以将值存储在 localStorage 中，例如

localStorage.setItem('isHeadingVisible', true);

并添加将检查每个页面加载的代码是否通过检查此标题可见或不可见

if(localStorage.get('isHeadingVisible')){}

你可以阅读更多关于localStoragehere的信息

但是如果用户在这些操作之后使用另一个浏览器，这将不起作用，因为用户的localStorage 在新浏览器中将是空的，所以我建议在这里使用后端数据，或者如果localStorage.get('isHeadingVisible') 则检查每个页面加载为undefined 并提交表单，设置localStorage.setItem('isHeadingVisible', true);

【讨论】：