使用浏览器“返回”按钮时强制重置表单按钮

Question

我在这里搜索了几十个类似的问题，并尝试实施提供的解决方案，但没有任何效果。

我在页面上有一个表单，我通过添加一个 onclick 事件来解决不耐烦的人多次单击“提交”的问题，该事件调用一个将提交按钮的文本（值）更改为“请稍候”的 JavaScript " 并添加了一个样式类，这样我就可以将按钮从绿色更改为红色。这个 onclick 事件在实际提交表单数据的脚本之前被触发。效果很好。

但是，在提交表单后，相当多的网站访问者使用浏览器的“返回”按钮返回页面，更改表单上的一些答案并重新提交 - 这很好（这是一个报价，他们可以选择几个不同的选项来获得不同的报价）。

所以我真的不想重置表单（尽管这是一个可以接受的解决方案，即使它并不理想，因为他们必须重新开始填写表单），我只想重置按钮……因为我现在的问题是，当他们返回时，按钮仍然是红色的，并且仍然显示“请稍候”。

理想情况下，我只想将按钮重置为原始状态。我尝试了许多不同的建议方法（此处和其他论坛）来强制刷新页面，强制重置表单，并将输入值更改回原始值 - 没有任何效果，因为问题在于使用浏览器上的后退按钮是浏览器只是加载了前一页的缓存版本 - 没有真正“触发”并且页面没有真正重新加载（因此窗口加载/正文加载解决方案也不起作用）。

我的问题是：当您使用后退按钮来重置按钮或无法重置表单时，是否有任何方法可以实际强制浏览器执行某些操作？一些合理的跨浏览器兼容的解决方案？

更新： 为了响应@jammykam 查看代码的请求，这是我现在更改按钮的方式（请注意，我实际上并没有使其禁用/不可点击，我只是更改文本和颜色以指示访问者应该不要一直点击它 - 禁用按钮会使他们无法修复错误并重新点击提交）

在我的 functions.php 文件中，我有一个 sn-p 来向表单添加一个 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

我知道这是一个老问题，但我也遇到过同样的问题，并且有一个相当简单的解决方案。

首先，我使用 .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（在第一次提交时发生），则会阻止任何进一步的提交。

为了阻止页面在按下后退按钮时将“已提交”设置为 true，我在我的 javascript 文件底部有这个代码块

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

当用户离开页面时调用.unload函数。

阅读更多关于 .unload at the jQuery site

Answer 3

是的，有一种称为 AJAX 和历史插件的技术：更多信息在这里http://benalman.com/projects/jquery-bbq-plugin/ 另一个不错的技术在这里：https://github.com/browserstate/history.js