前台限制默认表单重复提交(jquery 实现方式 防止因为网络延迟而产生的表单重复提交)

默认表单提交指的是,利用<input type="submit">或者 <button type="submit">实现的表单提交,

例如,

<form action="<%=contextPath %>/repeat/hello" method="post" >
     	<input type="submit" value="默认提交 input submit方式" id="morentijiao">
     	<button type="submit" value="默认提交 button submit方式" id="buttonsubmit">默认提交 button submit方式</button>
 </form>
     

实现思路:同防止ajax重复提交,维护一个提交按钮队列,通过jquery监听所有submit按钮的提交,如果在提交队列中,那么不再提交,如果不再提交队列中,那么放入提交队列,并提交。


实现代码:

扩展了数组的contains方法

Array.prototype.contains=function(element){
    	 var length  = this.length;
    	 while((--length) >=0){
    		 console.log(length+"--"+this[length]);
    		 if(this[length] == element){
    			 return true;
    		 }
    	 }
    	 return false;
     }
</pre><pre name="code" class="html">//维护默认表单提交的按钮
     var defaultButtonSubmitArr = [];
     $("input[type='submit'],button[type='submit']").click(function(e){
    	var id = e.toElement.id;
    	//如果维护队列中已经包含提交的按钮id,那么就不再进行提交
    	if(defaultButtonSubmitArr.contains(id)){
    		e.preventDefault();
    	}else{
    		//如果维护队列中没有包含提交的按钮id,那么将它放入队列中
    		defaultButtonSubmitArr.push(id);
    	}
    	
    	//continue as you wish
    	
    	 
     });


要求:所有的submit按钮都必须赋予id,因为队列中维护的就是提交按钮的id


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值