Question

我有一个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提交表单的选项。我可能需要为此更改整个代码。

还有其他方法吗？

Answer 1

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

localStorage.setItem('isHeadingVisible', true);

并添加代码，以检查是否可见标题，从而检查每次页面加载情况

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

您可以详细了解localStorage here

，但是如果用户在执行这些操作后将使用其他浏览器，则此方法将不起作用，因为用户的localStorage在新浏览器中会出现空白，因此我建议在此处使用后端数据，或者如果{ {1}}是localStorage.get('isHeadingVisible')，并且已提交表单，设置为undefined

Answer 2

以下内容如何：

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

提交后，它将样式从none更改为block。

Answer 3

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

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

3 个答案: