js防止表单重复提交

在表单提交的时候,用户有时候会重复的点击提交按钮,会导致多次提交表单,产生重复数据。
提交表单一般有三种方式
1.<input type="submit" >submit按钮 会调用onsubmit方法事件
2.<input type=text>当form中只有一个文本本框按回车的时候提交 会调用onsubmit方法事件
3.<input type=button οnclick=javascript: form1.submit()>调用表单的submit方法提交
前两种是可以触发 onsubmit事件的,但是第三种不会。
解决方法:
1、 onsubmit事件和submit方法增加一个表单提交的判断,submit方法进行包装。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js防止表单重复提交1</title>
    </head>
    <script>
        var setFormCheckSubmit = function(){
            var fs = document.forms; //获得页面上所有的表单
            for(var i =0;i<fs.length;i++){
                fs[i].submited = false; //添加一个属性用来记录表单是否提交状态
                fs[i].bashSubmit = fs[i].submit; //设置一个方法用来记录表单的submit的方法
                fs[i].submit = new Function("formSubmit(this)");//替换表单submit方法 this传入表单本身
                fs[i].onsubmit = function(ev){ //event对象
                    var e = ev || window.event;
                    e.returnValue?e.returnValue = false:e.preventDefault(); //ie? ie = false:其他  取消事件关联的默认动作  如submit调用该方法可以阻止表单提交
                    if(this.submited){
                        console.log("已提交表单,请勿重复提交!");
                        return false; //如果是提交中则返回false取消提交
                    }
                    this.submited = true;  //记录提交状态
                    this.bashSubmit(); //提交表单
                }
            }
        }
        function formSubmit(form){
            if(form.submited)return false; //如果是提交中则返回false取消提交
            form.submited = true;  //记录提交状态
            form.bashSubmit(); //提交表单
        }
        window.onload = function(){
            setFormCheckSubmit()
        }
    </script>
    <body >
        <form action="http://www.google.com.sg" method="post" name="mainForm" ><!--请求至http://www.google.com.sg 响应不了,方便测试-->
            用户名:<input name="username"  type="text"/>
            密码:<input name="password" type="password" />
            <input type="submit" />
            <input type="button" οnclick="mainForm.submit()" value="方法提交"/>
        </form>
    </body>
</html>

--------------------------------------


2、利用css的z-index属性,设置一个隐藏层,当表单提交后,层显示,层的z-index 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js防止表单重复提交2</title>
	</head>
	<style>
	body,div{margin:0 0}
	.submitLayer{background: black;opacity: 0.3;filter: Alpha(opacity=30);width: 100%;height: 100%;position: fixed;z-index: 11; }
	.submitInfo{z-index: 100;color: red;position:fixed;width: 120px;height: 28px;background: gray;text-align: center;left: 50%;top: 50%;margin-left: -60px;margin-top: -24px;}
	</style>
	<script>
		var setFormCheckSubmit = function(){
			var fs = document.forms; //获得页面上所有的表单
			for(var i =0;i<fs.length;i++){
				fs[i].bashSubmit = fs[i].submit; //设置一个方法用来记录表单的submit的方法
				fs[i].submit = new Function("formSubmit(this)");//替换表单submit方法 this传入表单本身
				fs[i].onsubmit = new Function("formSubmit(this)");//onsubmit事件 this传入表单本身
			}
			
		}
		function formSubmit(form){
			document.getElementById("infoLayer").style.display = "block"; //层展示
			form.bashSubmit(); //提交表单
		}
		window.onload = function(){
			setFormCheckSubmit();
			var layer = document.getElementById("submitLayer");
		}
	</script>
	<body>
		<div id="infoLayer" style="display: none;">
			<div class="submitLayer" ></div>
			<div class="submitInfo">表单提交中!!</div>
		</div>
		<form action="http://www.google.com.sg" method="post" name="mainForm">
			用户名:<input name="username"  type="text"/>
			密码:<input name="password" type="password" />
			<input type="submit" />
			<input type="button" οnclick="mainForm.submit()" value="方法提交"/>
		</form>
	</body>
</html>



  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值