使用瀏覽器的“后退”按鈕時強制重置表單按鈕

Question

我在這里搜索了數十個類似的問題，並嘗試實施提供的解決方案，但沒有任何效果。

我在頁面上有一個表單，並且通過添加一個onclick事件來解決不耐煩的人多次單擊“提交”的問題，該事件調用了一個javascript，該javascript將提交按鈕的文本（值）更改為“請稍候”並添加樣式類，因此我可以將按鈕從綠色更改為紅色。 該onclick事件會在實際提交表單數據的腳本之前觸發。 效果很好。

但是，提交表單后，相當多的站點訪問者使用瀏覽器的“后退”按鈕返回頁面，更改表單上的一些答案，然后重新提交-很好（用引號表示，他們可以選擇其他幾種選項以獲取不同的報價）。

因此，我真的不想重置表單（盡管這是一個可以接受的解決方案，即使它並不理想，因為那樣的話他們必須重新填寫表單），我只想重置按鈕……因為我現在的問題是，當他們返回時，該按鈕仍為紅色，仍然顯示“ Please Wait”。

理想情況下，我只想將按鈕重置回其原始狀態。 我嘗試了建議的多種方法（在這里和在其他論壇中）來強制刷新頁面，強制重置表單以及僅將輸入值更改回原始值-無效，因為問題在於使用瀏覽器上的“后退”按鈕是瀏覽器僅加載了上一頁的緩存版本-並未真正“觸發”任何內容，也沒有真正重新加載過該頁面（因此window onload / body onload解決方案也不起作用）。

我的問題是：當您使用后退按鈕（重置按鈕或重置表單失敗）時，有什么方法可以真正強制瀏覽器執行某些操作？ 是否有一些合理的跨瀏覽器兼容解決方案？

更新：響應@jammykam的請求以查看代碼，這是我現在更改按鈕的方式（請注意，我實際上並未使其變為禁用/不可點擊狀態，我只是更改了文本和顏色以指示訪客不應繼續點擊它-禁用按鈕會使他們無法修正錯誤並重新點擊提交）

在我的functions.php文件中，我有一個片段可以向表單添加onclick事件（我使用Gravity Forms並從其論壇中獲取了此信息）：

add_filter("gform_submit_button", "add_change_button_text", 10, 2);
function add_change_button_text($button, $form) {
    $dom = new DOMDocument();
    $dom->loadHTML($button);
    $input = $dom->getElementsByTagName('input')->item(0);
    if ($input->hasAttribute('onclick')) {
        $input->setAttribute("onclick","changebtn();".$input->getAttribute("onclick"));
    } else {
        $input->setAttribute("onclick","changebtn();");
    }
    return $dom->saveHtml();
}

然后在我的header.php文件中，我有這段代碼可以更改按鈕文本並添加一個類，以便可以更改按鈕顏色：

function changebtn() {
    var button = $("input[type='submit']");
    if (button.val() == "Free Quote") {
        button.val("Please Wait");
        button.addClass("plswait');
    } else {
        button.val("Free Quote");
    }
}

因此，正如我所提到的，這很好用並且可以更改按鈕，並且避免了我們之前獲得的多次單擊。..當有人使用“返回”按鈕時，我只是無法將其更改回。

Answer 1

嘗試使用元標記。

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

您也可以使用標頭Cache-Control選項，從服務器發送：

Cache-Control: no-cache, max-age=0, must-revalidate, no-store

Answer 2

是的，有一種叫做AJAX和歷史插件的技術：更多信息，請參見http://benalman.com/projects/jquery-bbq-plugin/另一種不錯的方法是： https : //github.com/browserstate/history.js

Answer 3

我知道這是一個老問題，但是我遇到了完全相同的問題，並且有一個非常簡單的解決方案。

首先，我使用.data函數停止了多個提交

form.on('submit', function(e){

    var jq_this = $(this);

    if(jq_this.data('submitted') === true)
    {
        e.preventDefault();
        return;
    }
    else
    {
        jq_this.data('submitted', true);
    }
}

如果將“已提交”的數據設置為true（在第一次提交時發生），則將阻止進一步的提交。

要在按下后退按鈕時阻止頁面將“ submitted”設置為true，請在我的javascript文件底部放置此代碼塊

$(window).unload(function()
{        
    form.data('submitted', false);
})

用戶離開頁面時，將調用.unload函數。

在jQuery網站上閱讀有關.unload的更多信息