在表单提交的时候，用户有时候会重复的点击提交按钮，会导致多次提交，产生重复数据。我们应该怎么办了？一般想法是：通过attachEvent在 form的onsubmit事件中写一个方法，每次触发该事件时执行该方法，我们可以给form增加一个submited属性，每次判断这个属性，为 false的时候继续提交表单并且设置form.submited=true，反之说明表单已经提交，就不再提交表单。
但是，出现问题了：提交表单一般有三种方式
<form action=xxx.aspx onsubmit="return false;"name=form1>
1.<input type=submit >submit按钮
2.<input type=text>当form中只有一个文本本框按回车的时候
3.<input type=button onclick=javascript： form1.submit()>自己写脚本提交
</form>
前两种是可以触发 onsubmit事件的，但是第三种不会。所以，仅仅捕获onsubmit事件时不行的，还必须在form的submit方法执行前，判断表单是否在提交。
function $setFormCheckSubmited(){
var frms=document.forms;
for(var i=0;i<document.forms.length;i++)
{
frms[i].baseSubmit=frms[i].submit;//保存表单原来的submit 方法
frms[i].submited=false;//添加一个submited属性，并且设置其为false
frms[i].submit=new Function("$submitForm(this)"); $addElementEventHandler(frms[i],"onsubmit","$submitForm(document.forms["+i+"])");
}
}
//提交一个表单，如果当前表单已经提交，按么就不会继续提交该表单
function $submitForm(frm)
{
if (frm.submited) return false;
frm.submited=true;
frm.baseSubmit();
}
//下面是addElementEventHandler的实现
/*
添加一个方法到到一个对象的一个的一个事件中
element 要设置的对象
eventName 事件名称， 字符串类型的。
methodName表示函数名称，字符串类型的。
*/
function $addElementEventHandler(element,eventName,methodName)
{
if (document.all)
{
element.attachEvent(eventName,new Function(methodName));
}
else
{
if (eventName.substring(0,2)=="on") eventName=eventName.substring(2);//firefox中所有的事件名称前面是没有on的。
element.addEventListener(eventName,new Function(methodName));
}
}
实例代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<SCRIPT language='JavaScript'>
function CheckUserName(){
if (document.FORM1.UserName.value == '' ){
alert('请输入要注册的会员!');
document.FORM1.UserName.focus();
return false;
}
document.FORM1.NextStep.disabled=true;
document.FORM1.NextStep.value='请稍后...'
return true;
}
</SCRIPT>
</head>
<BODY>
<!--注册-->
<a name="top"></a>
<h5 id="reg_title">新用户注册</h5>
<form action="/reg/registernew.dll" method="POST" name="FORM1" onSubmit="return CheckUserName();">
<input id=Hddinfo2 name=Hddinfo type=hidden value=1996021993>
<input id="SSVer2" name="SSVer" type="hidden" value="">
<input id=Urls name=Urls type=hidden value="http://reg.ssreader.com/newuser.asp">
<input id=Urld name=Urld type=hidden value="http://reg.ssreader.com/lineuser.asp">
<input id=Proc2 name=Proc type=hidden value=1>
<div id="reg_userland_licence" class="reg_userland_info">
<div class="reg_user_title" id="r_user">第二步：设定用户名 </div>
<p>* 用户名:
<input name="UserName" id="usname" type="text" size="16" maxlength="16" />
</p>
<div style="width: 100%; text-align: center; margin: 25px 0 0 0;">
<input name="NextStep" id="NextStep" type="submit" value="下一步" /></div>
</div>
</form>
</body>
</html>
另一种方法如下：
<DOCTYPE html>
<html>
<BODY BGCOLOR="#FFFFFF">
<form name='formsubmitf' id ="the" method="post" action="XXX.asp">
<input type='hidden' name='mypretime' value='0'>
<input type="button" value="写好了" name="button1" class="4round" onclick='formsubmit()'>
</form>
<script Language='JavaScript'>
function formsubmit() {
Today = new Date();
var NowHour = Today.getHours();
var NowMinute = Today.getMinutes();
var NowSecond = Today.getSeconds();
var mysec = (NowHour*3600)+(NowMinute*60)+NowSecond;
if((mysec-document.formsubmitf.mypretime.value)>600){
//600只是一个时间值，就是5分钟内禁止重复提交，值随便设
document.formsubmitf.mypretime.value=mysec;
}
else{
alert(' 按一次就够了，请勿重复提交！请耐心等待！谢谢合作！');
return false;
}
document.forms.formsubmitf.submit();
}
</script>
</html>
不过这个有个缺点，就是刷新一次，检测就不起作用，好处就是利用JS检测，不需要额外的权限支持。
当然方法还有比如让后退失效，让按钮失效显示“等待。。。”等等
分享到：
相关推荐
在Web开发中，表单重复提交是一个常见的问题，可能导致数据的冗余或错误。JavaScript作为客户端脚本语言，可以通过多种策略来防止用户意外或恶意地多次提交表单。以下是一些关键的知识点： 1. **禁用提交按钮**：最...
本篇文章将深入探讨如何防止表单重复提交，主要关注于基于Struts2框架的解决方案。 首先，理解表单重复提交的原因。用户在点击提交按钮后，如果网络延迟或用户误操作导致页面刷新或再次点击提交，就可能发生重复...
下面详细解释几种防止Layui表单重复提交的方法。 首先，在HTML表单中，为了避免在提交时页面刷新导致的重复提交，可以在标签中使用onsubmit="return false;"属性。这个属性的作用是在表单提交时返回false，阻止...
第一种：用flag标识，下面的代码设置... //当表单被提交过一次后checkSubmitFlg将变为true,根据判断将无法进行提交。 } checkSubmitFlg ==true; return true; } < /script > < form name=”form1” method=”pos
本示例主要探讨如何在JavaScript中实现防止表单重复提交的功能，并结合一个简单的登录页面实例来说明。 首先，我们需要理解基本的表单提交机制。当用户点击HTML表单中的提交按钮时，浏览器会发起一个HTTP请求，将...
为了确保用户在提交表单时不会无意或有意地多次发送请求，我们需要实施有效的防止表单重复提交的策略。以下是一些关键知识点： 1. **表单重复提交的类型**： - **用户行为**：用户可能意外按下刷新按钮，导致已...
对于第一种情况，可以使用JavaScript防止表单重复提交。方法是，在页面中添加JavaScript代码，判断提交按钮是否已经点击过， 如果已经点击过，则不允许再次提交。 使用Session防止表单重复提交 对于后面两种情况，...
### 客户端与服务器端防止表单重复提交策略 #### 客户端防止表单重复提交 在Web开发中，防止表单被重复提交是一个常见的需求，尤其是在表单提交后需要等待较长时间才能得到反馈的情况下。为了避免重复提交，可以在...
JavaScript防止表单重复提交的实例涉及到前端页面处理提交动作时常见的一个问题：用户在表单提交按钮被点击后，可能因为网络延迟或其他原因导致重复点击提交，从而使得表单被重复提交，给服务器造成不必要的负载甚至...
在Web开发中，防止表单重复提交是一个重要的问题，它能确保用户操作的唯一性和数据的一致性。ThinkPHP 3.2 是一个基于MVC模式的PHP开发框架，提供了丰富的功能来帮助开发者构建安全、高效的应用。在这个场景中，我们...
在IT行业中，尤其是在前端开发领域，防止用户重复提交是一项重要的任务，这有助于避免因网络延迟或用户误操作导致的数据混乱。Element-UI，一个流行的Vue.js组件库，提供了多种方式来处理这个问题。以下是如何在使用...
综上所述，防止用户表单重复提交是一个涉及前端交互和后端逻辑的综合问题。通过前端禁用提交按钮、使用Ajax异步请求，以及后端的Token验证、幂等性设计和事务控制，我们可以有效防止重复提交，确保系统数据的一致性...
在Web开发中，表单重复提交是一个常见的问题，可能导致数据不一致或服务器资源浪费。本文将深入探讨如何通过自定义标签来防止表单的重复提交，以确保数据的一致性和系统的稳定性。 首先，理解表单重复提交的问题。...
二、防止表单重复提交的方法 1. **使用JavaScript禁用提交按钮** 在表单提交时，可以使用JavaScript来禁用提交按钮，以防止用户连续点击。例如： ```javascript function disableSubmit() { document....
几种防止表单重复提交的方法 禁掉提交按钮。表单提交后使用Javascript使提交按钮disable。这种方法防止心急的用户多次点击按钮。但有个问题，如果客户端把Javascript给禁止掉，这种方法就无效了。 我之前的文章曾说...
下面将详细解释Struts2如何通过重定向来防止表单重复提交。 首先，理解表单重复提交的场景：用户在提交表单后，由于网络延迟或其他原因，可能会无意中多次点击提交按钮。如果服务器没有处理这些重复请求，那么相同...
在Web开发中，防止表单重复提交是一个重要的问题，它涉及到数据一致性、用户体验以及系统稳定性。重复提交可能会导致数据库中的数据出现错误或者冗余，因此需要采取措施来防止这种情况发生。以下是一些防止表单重复...