刷新表單提交頁面后顯示隱藏的div

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更多信息

但是如果用戶在執行這些操作后將使用另一個瀏覽器，則將無法正常工作，因為用戶的localStorage在新瀏覽器中將被清空，因此我建議在此處使用后端數據，或者如果localStorage.get('isHeadingVisible')檢查每個頁面加載undefined且已提交表單，請設置localStorage.setItem('isHeadingVisible', true);

Answer 2

怎么樣：

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

它只是改變了風格，從none以block submited時。