使用瀏覽器「後退」按鈕時強制窗體按鈕重置

我已經通過幾十個類似的問題在這裏搜索並試圖實現提供的解決方案，但沒有任何工作。使用瀏覽器「後退」按鈕時強制窗體按鈕重置

我在頁面上有一個表單，並且我通過添加一個onclick事件來修復不耐煩的人點擊'submit'多次的問題，這個事件調用一個javascript，將提交按鈕的文本（值）改爲「please等待「並添加一個樣式類，以便我可以將按鈕從綠色更改爲紅色。這個onclick事件在實際提交表單數據的腳本之前被觸發。很棒。

然而，表單提交後的網站訪問者的相當數量的使用瀏覽器的「返回」按鈕返回一個頁面，更改窗體上的幾個答案，並重新提交 - 這是很好的（它是一個報價，他們可以選擇幾個不同的選項來獲得不同的報價）。

所以我不想重置表單（雖然這將是一個可接受的解決方案，即使它不是理想的，因爲他們將不得不重新填寫表單），我只是想重置按鈕...因爲我現在的問題是，當他們回去時，按鈕仍然是紅色，並且仍然顯示「Please Wait」。

理想情況下，我只是想將按鈕重置回它的原始狀態。我已經嘗試了許多不同的方法（這裏和其他論壇）建議強制刷新頁面，強制重置表單，並將輸入值更改回原來的值 - 因爲問題出在使用瀏覽器上的後退按鈕是瀏覽器只是加載上一頁的緩存版本 - 沒有什麼是真正的「觸發」，並且頁面沒有真正重新加載（所以窗口onload/body onload解決方案也不工作）。

我的問題是：有沒有什麼辦法來實際強制瀏覽器當您使用後退按鈕，我可以從工作重置按鈕或做不到這一點重置的形式做一些事情？一些合理的跨瀏覽器兼容的解決方案？

更新：爲了迴應@ jammykam的請求來看代碼，這裏是我現在如何改變按鈕（請注意，我實際上並沒有禁用/不可點擊，我只是改變文本和顏色以表明訪問者不應該繼續點擊它 - 禁用按鈕使他們無法修復錯誤，並重新點擊提交）

在我的functions.php文件中我有一個片段添加一個onclick事件到窗體（我使用重力形式，並從他們的論壇得到這個）：

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文件中我有這個代碼c hanges按鈕文本，並添加了類，所以我可以改變按鈕顏色：

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

因此，正如我所說，這個偉大工程，改變了按鈕，阻止了我們先前得到... ..我的多次點擊當有人使用「返回」按鈕時，無法將其改回。

來源

2014-01-23 Trisha

不能添加一個onload事件，將設置你想要的方式？所以每次頁面加載時都會設置爲綠色並提交。 – WreithKassan

發佈你如何停止點擊提交按鈕的代碼 – jammykam

你不能只啓用/禁用按鈕？無論如何，表單可能仍然可以在大多數瀏覽器中使用回車鍵提交。 – RobG

嘗試使用元標記。

<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

來源

2014-01-23 23:46:02

我會給這個嘗試並回發 - 謝謝。 – Trisha

好，我只是做了一堆閱讀緩存控制，這聽起來像它會工作到強制刷新原來的頁面正在從一個「後退」按鈕按下返回。這可能* *被我們必須接受，如果我們不能找到一個適合我們的理想，這是剛剛重置表單按鈕返回到它的原始的解決方案，預提交狀態。理想情況下，我們希望將表單數據留在那裏，因此如果有人想重新提交併且只更改一些答案，則他們不必重新開始填寫整個表單。但是，謝謝你的建議，這非常有益！ – Trisha

是有一個名爲AJAX和歷史插件技術：這裏http://benalman.com/projects/jquery-bbq-plugin/更多信息的另一個很好的一個是在這裏：https://github.com/browserstate/history.js

來源

2014-01-23 23:46:51 Vickel

謝謝你們提供這些鏈接 - 我不是一個真正的編碼員，我剛剛學會了多年來採納和修改其他人的代碼，所以關於這些文檔的文檔稍微凌駕於我的頭上，但我可以看到有用性所以我會開始閱讀教程！ – Trisha

我知道這是一個老問題，但我有這個完全相同的問題，並有一個相當簡單的解決方案。

首先，我使用。數據功能

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，這發生在第一提交，防止任何進一步的提交。

從按下後退按鈕時保持「提交」設置爲true停止頁，我有這樣的代碼塊在我的JavaScript文件

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

的.unload函數被調用時，底部用戶離開頁面。

閱讀更多關於.unload at the jQuery site

來源

2015-04-14 15:25:13 iCode101

使用瀏覽器「後退」按鈕時強制窗體按鈕重置

回答

相關問題