js防止表单重复提交

最新推荐文章于 2023-06-02 16:00:53 发布

xiaoflsuper

最新推荐文章于 2023-06-02 16:00:53 发布

阅读量3.5k

点赞数 1

分类专栏： javascript 文章标签：防止重复提交表单 javascript

本文链接：https://blog.csdn.net/xiaoflsuper/article/details/51373789

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在表单提交的时候，用户有时候会重复的点击提交按钮，会导致多次提交表单，产生重复数据。

提交表单一般有三种方式

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>

xiaoflsuper

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js防止表单重复提交

在表单提交的时候，用户有时候会重复的点击提交按钮，会导致多次提交表单，产生重复数据。提交表单一般有三种方式1.submit按钮会调用onsubmit方法事件2.当form中只有一个文本本框按回车的时候提交会调用onsubmit事件3.调用表单的submit方法提交前两种是可以触发 onsubmit事件的，但是第三种不会。解决方法：1、 onsubmi
复制链接

扫一扫