Jquery 实现表单提交按钮变灰，防止多次点击提交重复数据

最新推荐文章于 2019-11-28 12:09:00 发布

weixin_33701617

最新推荐文章于 2019-11-28 12:09:00 发布

阅读量296

点赞数

文章标签： javascript python php ViewUI

原文链接：https://my.oschina.net/meng527/blog/1503830

版权

2019独角兽企业重金招聘Python工程师标准>>>

表单提交时候我们应该控制提交按钮，不能点击多次进行数据的重复提交。要不然就会有冗余的重复的数据在系统中，造成系统出现数据垃圾。jQuery很简单的就可以实现对表单提交按钮控制，下面就是相关的例子和代码。

第一种方法：常用

<form action="${pageContext.servletContext.contextPath}/XXX/###" method="post" id="messageForm">
	姓名:<input name = "name" type="text" />
             <button type="button" id="submit">提交申请</button>
</form>
<script>
$("#submit").click(function(){

    $(this).attr("disabled","true"); //设置变灰按钮
    $("#messageForm").submit();//提交表单
    setTimeout("$('#submit').removeAttr('disabled')",3000); //设置三秒后提交按钮 显示
     
})
</scritp>

第二种方法：常用

<form name=fm method="POST" action="/">
<p>按钮变灰</p>
    name: <input type="text" name="name"/>
     <input type="button" value="提交" onclick="javascript:{this.disabled=true;document.fm.submit();}">

</form>

第三种方法：

<form name=fm method="POST" action="/" >
  <input type="submit" name="Submit" value="提交" id="submitId" onclick="submit();">
</form>
<script language="javascript">
 function submit()
 {
 var submitId=document.getElementById('submitId');
 submitId.disabled=true;
 document.fm.submit();
 setTimeout("submitId.disabled=false;",3000); //代码核心在这里，3秒还原按钮代码
}
</script>

第四种方法：常用

<script language="javascript">   
<!--   
var submitcount=0;   
function submitOnce (form){   
  if (submitcount == 0){   
     submitcount++;   
     return true;   
  } else{   
    alert("正在操作，请不要重复提交，谢谢！");   
    return false;   
  }   
}   
//-->   
</script>   
  
<form name="the_form" method="post" action="" onSubmit="return submitOnce(this)">   
<input name="text" type="text" id="text" />   
<input name="cont" value="提交" type="submit">   
</form>

第五种方法：

$.ajax( { 
       type: 'POST', 
        url: APP+'?m=Shopping&a=ajaxSubmitorder&sid='+sid+'&src='+src, 
      cache:false, 
   dataType: 'json', 
       data: {'src':src,"uid":uid,'shipping_id':shipping_id,'order_amount':order_amount,'amount':amount,'postscript':postscript,'addr_id':addr_id}, 
      async: false, 
 beforeSend:function() { 
          //触发ajax请求开始时执行 
          $('#submit_font').text('提交订单中...'); 
          $('.pay_alipay').attr('onclick','javascript:void();');//改变提交按钮上的文字并将按钮设置为不可点击 },  
    success: function (msg, textStatus)  { 
        if(msg.result==1) { 
           $.Alert('成功提交订单', 160); 
           window.location.href=APP+'?m=Pay&a=index&sid='+ sid + '&fuid='+ fuid + '&parent_order_sn='+msg.parent_order_sn; 
        } else{ 
           $.Alert(msg.msg, 160); 
           $('#submit_font').text('提交订单'); 
           $('.pay_alipay').attr('onclick','submitorder();');//改变提交按钮上的文字并将按钮设置为可点击      
        } 
    }, 
      error: function (textStatus)  { 
       $.Alert('网络繁忙，请稍后再试...', 160); 
       $('#submit_font').text('提交订单'); 
       $('.pay_alipay').attr('onclick','submitorder();');//改变提交按钮上的文字并将按钮设置为可点击  
    }, 
   complete: function(msg, textStatus) {  
       //ajax请求完成时执行 
       if(msg.result==1) { 
           $('#submit_font').text('提交订单');  
           $('.pay_alipay').attr('onclick','javascript:void();');//改变提交按钮上的文字并将按钮设置为可以点击 
       } 
    }  
});

第六种方法：

<from method="post" action="b.php" onsubmit="document.getElementById('sub').disabled=true;">  
<!--表单栏目-->  
<input type='submit' id="sub" value="save"/>  
</from>

第七种方法：

<a href="javascript:;" onclick="return funcOne();">点击</a>  
<scripttype="text/javascript">  
function funcOne(){  
    //点击一次后把funcTwo赋给funcOne,funcTwo是一个什么也不执行的函数，因此再次点击不执行任何操作  
    funcOne=funcTwo;  
    alert("Clickthe button!");  
    return false;  
}  
function funcTwo(){  
    return false;  
}  
</script>

第八种方法：

<html> 
<body> 
<form method="get" action="" target="box"> 
   <input id="buttonid" type="submit" value="提交" /> 
</form> 
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script> 
$("form").submit(function() {   
   $("#buttonid").val("正在处理...");   
   $("#buttonid").attr("disabled", "disabled"); 
}); 
</script> 
</body> 
</html>

转载于:https://my.oschina.net/meng527/blog/1503830