javascript

JQuery脚本-通过禁用按钮防止表单重复提交 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script language="javascript">   
<!--   
var submitcount=0;   
function submitOnce (form){   
  if (submitcount == 0){   
     submitcount++;   
     return true;   
  } else{   
    alert("正在操作，请不要重复提交，谢谢！");   
    return false;   
  }   
}   
//-->   
</script>   
  
<form name="the_form" method="post" action="" onSubmit="return submitOnce(this)">   
<input name="text" type="text" id="text" />   
<input name="cont" value="提交" type="submit">   
</form>

在上例中，如果用户已经单击“提交”按钮，该脚本会自动记录当前的状态，并将submitcount变量自加1，当用户试图再次提交时，脚本判断submitcount变量值非零，提示用户已经提交，从而避免重复提交表单。

或者：

1
2
3
4
<from method="post" action="b.php" onsubmit="document.getElementById('sub').disabled=true;">  
<!--表单栏目-->  
<input type='submit' id="sub" value="save"/>  
</from>

这里提供两种不同情况下的阻止重复点击解决方案。
1.按钮BUTTON类
2.<a>标签类

对于第一类情况，button有一个属性是disabled控制其是否可以点击,看代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input type="button" value="Click"id="subBtn"/>  
<script type="text/javascript">  
function myFunc(){  
    //code  
   //执行某段代码后可选择移除disabled属性，让button可以再次被点击  
    $("#subBtn").removeAttr("disabled");  
}  
$("#subBtn").click(function(){  
    //让button无法再次点击  
   $(this).attr("disabled","disabled");  
    //执行其它代码，比如提交事件等  
    myFunc();  
});  
</script>

第二类情况，可以使用按钮或链接的click事件来执行预期的单击动作，然后将事件处理重定向，以阻止其余的点击。

1
2
3
4
5
6
7
8
9
10
11
12
<a href="javascript:;" onclick="return funcOne();">点击</a>  
<scripttype="text/javascript">  
function funcOne(){  
    //点击一次后把funcTwo赋给funcOne,funcTwo是一个什么也不执行的函数，因此再次点击不执行任何操作  
    funcOne=funcTwo;  
    alert("Clickthe button!");  
    return false;  
}  
function funcTwo(){  
    return false;  
}  
</script>

扩展阅读：如何避免页面刷新导致数据重复写入数据库