js防止表单重复提交

来源：互联网发布：加入浙江网络作协编辑：程序博客网时间：2024/05/16 23:37

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

提交表单一般有三种方式

1.<input type="submit" >submit按钮会调用onsubmit方法事件
2.<input type=text>当form中只有一个文本本框按回车的时候提交会调用onsubmit方法事件
3.<input type=button onclick=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" onclick="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" onclick="mainForm.submit()" value="方法提交"/></form></body></html>

1 0