Question

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

这是一个示例网址： 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方法在同一页面上处理ecard，然后在成功时你可以取消禁用提交按钮。

目前无法提供任何代码，因为我们不确定您当前使用的流量/方法。

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>

单击时禁用按钮

3 个答案: