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

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

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


  1. <form action=“${pageContext.servletContext.contextPath}/XXX/###” method=“post” id=“messageForm”>  
  2.     姓名:<input name = “name” type=“text” />  
  3.              <button type=“button” id=“submit”>提交申请</button>  
  4. </form>  
  5. <script>  
  6. $(“#submit”).click(function(){  
  7.   
  8.     $(this).attr(“disabled”,”true”); //设置变灰按钮  
  9.     $(“#messageForm”).submit();//提交表单  
  10.     setTimeout(“$(‘#submit’).removeAttr(‘disabled’)”,3000); //设置三秒后提交按钮 显示  
  11.        
  12. })  
  13. </scritp></span>  
  14.   
  15. </span>  
<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></span>

</span>

附:其他的实现方法,也使用了js

  第一种:

  1. <form name=fm method=“POST” action=“/”>  
  2. <p>按钮变灰</p>  
  3.     name: <input type=“text” name=“name”/>  
  4.      <input type=“button” value=“提交” onclick=“javascript:{this.disabled=true;document.fm.submit();}”>  
  5.   
  6. </form>  
<form name=fm method="POST" action="/">
<p>按钮变灰</p>
    name: <input type="text" name="name"/>
     <input type="button" value="提交" οnclick="javascript:{this.disabled=true;document.fm.submit();}">

</form>

 第二种:

  1. <form name=fm method=“POST” action=“/” >  
  2.   <input type=“submit” name=“Submit” value=“提交” id=“submitId” onclick=“submit();”>  
  3. </form>  
  4. <script language=“javascript”>  
  5.  function submit()  
  6.  {  
  7.  var submitId=document.getElementById(‘submitId’);  
  8.  submitId.disabled=true;  
  9.  document.fm.submit();  
  10.  setTimeout(“submitId.disabled=false;”,3000); //代码核心在这里,3秒还原按钮代码  
  11. }  
  12. </script>   
<form name=fm method="POST" action="/" >
  <input type="submit" name="Submit" value="提交" id="submitId" οnclick="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> 

前后代码进行控制,后台代码也要进行控制,这样子就可以确保万无一失了!

后台代码控制表单提交有一个好的办法就是使用session, 具体可以参考下面这篇博文:

JavaWeb学习总结(十三)——使用Session防止表单重复提交

http://www.cnblogs.com/xdp-gacl/p/3859416.html

其实后台控制表单重复提交的原理:

(1)在表单提交页面生成一个唯一的token;token可以保存在session中。(若使用了缓存,也可以保存在缓存中)

(2)提交的时候验证,后台首先验证token,验证通过,才可以进行提交操作;

(3)当表单数据提交成功(保存到数据库-持久化),然后删除session(缓存)中对应的token。

 

在页面中添加Token防止越权访问-也可做表单重复提交,使用的原理也是Token!

http://blog.csdn.net/chinawszjr/article/details/51096095

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101627.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ResourceBundle用法[通俗易懂]

    ResourceBundle用法[通俗易懂]ResourceBundle用于解释资源文件。 1.新建一个.properties文件这里为:AccessMessages.properties例error=错误warn=警告放入工程下的en_US,目录结构如图  2.建立绑定关系[ResourceBundle("AccessMessages")]privatestaticvarrb:Resource…

  • APAP论文阅读笔记[通俗易懂]

    APAP论文阅读笔记[通俗易懂]As-Projective-As-PossibleImageStitchingwithMovingDLT论文阅读笔记论文和代码可以在这个网址找到:https://cs.adelaide.edu.au/~tjchin/apap/一、全文翻译题目:使用移动DLT进行尽可能投影的图像拼接摘要:我们专注于图像拼接的任务,通常通过估计投影扭曲来解决这一问题——当场景是平面的或当视图完全因旋转而不同时,该模型是合理的。这样的条件在实践中很容易被违反,这就产生了使用重影人工制品的缝合结果,这就需要使用去

  • 计算机组成原理知识点总结「建议收藏」

    计算机组成原理知识点总结「建议收藏」快考试了,计算机组成原理这门课学的真不咋地,自己从头看书也感觉看不下去,于是找了哈工大的慕课来学习,在这里记记重点——————————————————————————————–计算机系统可分为硬件和软件硬件:计算机的实体,如主机,外设等。软件:由具有各科特殊功能

  • C# 互斥锁 Mutex

    C# 互斥锁 Mutex当两个或更多线程需要同时访问一个共享资源时,系统需要使用同步机制来确保一次只有一个线程使用该资源。Mutex 是同步基元,它只向一个线程授予对共享资源的独占访问权。如果一个线程获取了互斥体,则要获取该互斥体的第二个线程将被挂起,直到第一个线程释放该互斥体。privatestaticMutexmut=newMutex();两个线程访问资源需要互斥时,两个线程都要用互斥锁。

  • 前后端分离架构概述「建议收藏」

    1、背景&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础。这

  • 深度强化学习——DQN「建议收藏」

    DQN(DeepQ-Learning)可谓是深度强化学习(DeepReinforcementLearning)的开山之作,是将深度学习与增强学习结合起来从而实现从感知(Perception)到动作(Action)的端对端(End-to-end)学习的一种全新的算法。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号