单击时禁用按钮

Question

我有一种用户可以用来发送电子贺卡的表格。

这是一个示例URL： http : //jimpix.co.uk/ecards/normal-ecard.asp?id=5480

表单的底部是以下HTML（包含发送按钮）：

<div class="col-lg-6">
  <legend>Next bit...</legend>
  <button type="button" id="BtnPrev" class="btn btn-info" onclick="return valFormPrev(theForm,'preview');"/>Preview Your Ecard</button>
  <button type="button" id="BtnGo" class="btn btn-success" class="preview" onclick="return valFormGo(theForm,'process');"/>Send Now</button>
  <p class="top10"><a href="#BtnPrev" onclick="return ResetBtns();">Reset buttons so you can use them again</a></p>
</div>

由于用户单击按钮时页面可能需要一段时间才能处理，因此我将其添加到用于验证表单的JS的末尾（位于http://jimpix.co.uk/dist/js/ecard.js） ）

假设用户单击“立即发送”按钮，它将调用“ valFormGo”功能。

那末尾包含以下代码：

document.getElementById("BtnGo").disabled = 'true';

如果用户单击该按钮，则会禁用该按钮，因此他们无法多次单击该按钮并多次发送同一张电子贺卡。

这似乎可行，但是如果一旦他们发送了电子贺卡，他们便按了“后退”按钮，例如再次发送给其他人，即使刷新页面，该按钮也保持禁用状态。

我必须设置一个功能以允许他们通过以下方式再次激活按钮：

function ResetBtns()
{
  document.getElementById('BtnPrev').removeAttribute("disabled");
  document.getElementById('BtnGo').removeAttribute("disabled");
}

可行，但是笨拙。

我只是想知道是否有人知道一个更优雅的解决方案，当按下该按钮时，也许我可以遵循它来禁用按钮，或者在等待下一页处理时让按钮将文本更改为“正在处理...”数据。

基本上，我已经对此做了黑客工作，如果有人可以就可能的替代方案提供建议，将不胜感激。

任何建议将不胜感激。

谢谢

Answer 1

尝试这个：

//to disable buttons
$('BtnPrev').click(function(){

    this.prop('disabled', true);

});

$('BtnGo').click(function(){

    this.prop('disabled', true);

});

//to enable buttons
function ResetBtns() {    

    $('BtnPrev').prop('disabled', false);
    $('BtnGo').prop('disabled', false);

}

Answer 2

为什么不使用ajax方法在同一页面上处理电子贺卡，那么一旦成功，您可以取消禁用提交按钮。

由于不确定您当前使用的流程/方法，目前无法提供任何代码。

Answer 3

只需使函数运行如下：

<button onclick="myfunction()" id="activate"></button>
<script>
function myfunction(){if(unrun==true){unrun=false;
document.getElementById("activate").innerHTML="Processing...."; 
code goes here;}}
</script>