如何防止提交按钮被按两次

Question

我试图阻止系统用户不在 Oracle ApEx 中按两次“提交”按钮，但不确定如何使用 jQuery 定位以下代码，即：

<a href="javascript:doSubmit('MY_SUBMIT')">
<img border="0" id="MS_BTN" alt="Submit Request" src="submit_btn.gif">
</a>

我基本上想确保所有必需的表单验证都已通过并且当用户按下“提交”按钮时，我想在按下按钮后立即隐藏该按钮。

我尝试了以下代码，因为我无法使用 src 值，即：

$("a:contains('MY_SUBMIT')").hide();

但这不起作用。

如何将此按钮添加到 onclick 事件中，并在成功的初始单击后基本上对用户隐藏此按钮？

Answer 1

以下是如何使用 jQuery 执行此操作的示例：

HTML：

<a id="mySubmit" href="#">
<img border="0" alt="Submit Request" src="submit_btn.gif">
</a>

代码（加载文档后运行）：

$("#mySubmit").click(function(event) {
    $(this).hide();
    // do other stuff here
    return(false);
});

并且，一个工作示例： http://jsfiddle.net/jfriend00/CtpLU/

或者，您可以仅使用图像而不使用 标签，如下所示：

<img id="mySubmit" border="0" alt="Submit Request" src="submit_btn.gif">

$("#mySubmit").click(function(event) {
    $(this).hide();
    // do other stuff here
    return(false);
});

除了隐藏按钮是：

1. 设置一个您已经提交的标志，并且不要再做第二次。
2. 记录最后一次提交的时间，并且不允许在一段时间内（例如5分钟内）两次提交。
3. 取消绑定事件处理程序，因此单击提交按钮不再执行任何操作。
4. 对服务器进行编码以忽略某个时间段内来自同一客户端的两次提交。

Answer 2

也许设置一个全局变量，当第一次单击链接时该变量会发生变化

var clicked = false;

function doSubmit(){
  if(clicked) return;
  clicked = true;

  // all of your code //

  clicked = false;
}

Answer 3

为锚标记提供一些 ID，然后您可以使用以下代码

$('#anchorTagId').unbind('click.submit').bind('click.submit', function (){
  $(this).unbind('click.submit');
  $(this).hide();
  doSubmit('MY_SUBMIT');
});

希望这会有所帮助。

谢谢。

Answer 4

最好的办法是向 元素添加一个 ID，否则以某种方式定位图像父级：

$("img[src='submit_btn.gif']").click(function() {
    $(this).parent().hide();
});

理论上任何属性都可以作为目标，甚至是“alt”属性。