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

我已经通过几十个类似的问题在这里搜索并试图实现提供的解决方案，但没有任何工作。使用浏览器“后退”按钮时强制窗体按钮重置

我在页面上有一个表单，并且我通过添加一个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

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

回答

相关问题