通过js点击事件处理防止表单重复提交

鄂东男孩

于 2021-12-01 15:41:11 发布

阅读量1.5k

点赞数 1

文章标签： bootstrap json sqlserver

本文链接：https://blog.csdn.net/kay523393/article/details/121656849

版权

本文介绍了两种使用JavaScript防止表单重复提交的方法。一种是通过OnClick事件改变按钮状态，另一种是利用OnSubmit()方法弹出警告对话框。这两种方式都可以有效避免用户意外或恶意的多次提交，确保数据的一致性和安全性。

摘要由CSDN通过智能技术生成

当用户单击“提交”按钮后，该按钮将变为灰色不可用状态

上面的例子中使用OnClick事件检测用户的提交状态，如果单击了“提交”按钮，该按钮立即置为失效状态，用户不能单击按钮再次提交。

还有一个方法，也是利用JavaScript的功能，但是使用的是OnSubmit()方法，如果已经提交过一次表单，将立即弹出对话框，代码如下：

<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变量值非零，提示用户已经提交，从而避免重复提交表单。