在表单提交的时候,用户有时候会重复的点击提交按钮,会导致多次提交表单,产生重复数据。
提交表单一般有三种方式
1.<input type="submit" >submit按钮 会调用onsubmit方法事件
2.<input type=text>当form中只有一个文本本框按回车的时候提交 会调用onsubmit方法事件
3.<input type=button οnclick=javascript: form1.submit()>调用表单的submit方法提交
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>