Question

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

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

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

所以我真的不想重置表单（虽然这是一个可接受的解决方案，即使它不理想，因为他们必须重新填写表单），我只是想重置按钮...因为我现在的问题是当他们回去时，按钮仍然是红色仍然显示“请等待”。

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

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

更新：为了回应@ 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");
    }
}

正如我所提到的，这非常有用并且更改了按钮，并且阻止了我们之前获得的多次点击......当有人使用“后退”按钮时，我无法将其更改回来。 / p>

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);
    }
}

如果数据已提交＆＃39;设置为true，在第一次提交时发生，任何进一步的提交都被阻止。

要阻止页面保持提交＆＃39;按下后退按钮时设置为true，我的javascript文件底部有这个代码块

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

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

详细了解.unload at the jQuery site

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

3 个答案: