开发日志：JS防止表单重复提交【优化版本】

最新推荐文章于 2022-04-09 12:29:54 发布

抓住梦想

最新推荐文章于 2022-04-09 12:29:54 发布

阅读量788

点赞数

CC 4.0 BY-SA版权

分类专栏：开发日志 javascript

本文链接：https://blog.youkuaiyun.com/kaidishi/article/details/41442121

开发日志同时被 2 个专栏收录

34 篇文章

订阅专栏

javascript

31 篇文章

订阅专栏

本文介绍了两种防止网页表单重复提交的方法。一种是在点击事件中控制按钮状态，另一种是利用表单的onsubmit事件来实现。通过这些技巧可以有效避免因用户误操作导致的数据错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防止表单重复提交

之前的方案：

触发点击事件的时设置button的disabled设置为true，当符合提交条件时，手动获取form表单调用submit()事件，如果不符合提交条件，则将disabled设置回false

<html>
<script>
//验证 
	function checkOk(){
		var submitBtn = document.getElementById("submitBtn");
		var title = document.getElementById("title");
		var frmAction = document.getElementById("frmAction");
		submitBtn.disabled=true;//禁用按钮 
		if(title!=""){
			alert("提交成功");
			frmAction.submit();//按钮disabled=true后，不再触发提交事件，需要手动提交
		}else{
			alert("标题不能为空！");
			submitBtn.disabled=false;//恢复按钮 
		}
	}
	
 

</script>
<form action="XXX.action" id="frmAction">
 	<input type="text" id="title" value="标题"/><br/>
 	<input type="submit" id="submitBtn" value="提交" onclick="checkOk()"/>
</form>
</html>

新方案：

将button的disabled=true逻辑设置在form表单的onsubmit事件中，只要触发提交方法时才设置disabled为true。

<html>
<script>
//验证 
	function checkOk(){
		var title = document.getElementById("title");
		if(title!=""){
			return true;
		}else{
			alert("标题不能为空！");
			return false;
		}
	}
	
	function btnDisabled(){
    	document.getElementById("submitBtn").disabled=true;
		alert("开始提交");
    }

</script>
<form action="XXX.action" id="frmAction" onsubmit="btnDisabled()">
 	<input type="text" id="title" value="标题"/><br/>
 	<input type="submit" id="submitBtn" value="提交" onclick="checkOk()"/>
</form>
</html>