Jquery 实现表单提交按钮变灰,防止多次点击提交重复数据
May 16, 2016 pm 07:17 PM表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交。要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾。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></span> </span>
附:其他的实现方法,也使用了js
第一种:
<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>
前后代码进行控制,后台代码也要进行控制,这样子就可以确保万无一失了!
后台代码控制表单提交有一个好的办法就是使用session, 具体可以参考下面这篇博文:
其实后台控制表单重复提交的原理:
(1)在表单提交页面生成一个唯一的token;token可以保存在session中。(若使用了缓存,也可以保存在缓存中)
(2)提交的时候验证,后台首先验证token,验证通过,才可以进行提交操作;
(3)当表单数据提交成功(保存到数据库-持久化),然后删除session(缓存)中对应的token。
更多相关教程请访问 JavaScript视频教程

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide

Comment utiliser la méthode de requête PUT dans jQuery ?

Comment supprimer l'attribut height d'un élément avec jQuery ?

Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page

Utilisez jQuery pour modifier le contenu textuel de toutes les balises

Conseils pour utiliser les classes de formulaires Laravel : moyens d'améliorer l'efficacité

Comprendre le rôle et les scénarios d'application de eq dans jQuery

Comment savoir si un élément jQuery possède un attribut spécifique ?
