使用浏览器的“后退”按钮时强制重置表单按钮

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