A-A+

js表单点击提交按钮后变成灰色(防止表单重复提交实现代码)

2016年02月17日 10:52 汪洋大海 暂无评论 共2852字 (阅读3,989 views次)

表单点击提交按钮后变成灰色这种做法就是为了防止用户重复提交数据防，我们利用了form的一个属性disabled禁止按钮使用,代码如下:

  1. <input type="button" value="提交" onclick="javascript:{this.disabled=true;document.form1.submit();}">

例子代码如下:

  1. <form name="form1" method="POST" action="http://www.xiariboke.com" target="_blank">
  2. <input type="text" name="T1" size="20">
  3. <input type="button" value="提交" onclick="javascript:{this.disabled=true;document.form1.submit();}">
  4. <input type="reset" value="重置" name="B2">
  5. </form>

很多事情大家可灵活运行即可，其它办法就不说了。

 

重复提交、重复刷新、防止后退等等都是属于系统为避免重复记录而需要解决的问题，在客户端去处理需要针对每一种的可能提出相应的解决方案，然而在服务器端看来只不过是对于数据真实性的检验问题，基于令牌的处理就是一劳永逸的方法,代码如下:

  1. <script Language='JavaScript'>
  2. function formsubmit() {
  3.     Today = new Date();
  4.     var NowHour = Today.getHours();
  5.     var NowMinute = Today.getMinutes();
  6.     var NowSecond = Today.getSeconds();
  7.     var mysec = (NowHour*3600)+(NowMinute*60)+NowSecond;
  8.     if((mysec-document.formsubmitf.mypretime.value)>600){
  9.         //600只是一个时间值，就是5分钟内禁止重复提交，值随便设
  10.         document.formsubmitf.mypretime.value=mysec;
  11.     }
  12.     else{
  13.         alert(' 按一次就够了，请勿重复提交！请耐心等待！谢谢合作！');
  14.         return false;
  15.     }
  16.     document.forms.formsubmitf.submit();
  17. }
  18. </script>

防止网页后退–禁止缓存

通过控制浏览器的缓存及页面的有效期，当在重定向之后的新页面上点击浏览器后退按钮时，会提示”网页已过期”，从而防止后退时导致表单被提交。但这种方式不是对所有浏览器都是有效的，所以要考虑后再使用。在response时在header中添加如下代码来控制浏览器的缓存及网页的有效期限或直接在网页的中添加,代码如下:

  1. <?php
  2. //.....
  3. ///在IE 4或5中，Cache-Control标记将被忽略，不起作用
  4. header('Cache-Control: no-cache');
  5. header('Expires: 0');
  6. //对于https有效,与“Expires: -1”相同，此时浏览器仍旧缓存页面，但把页面标记为立即过期
  7. header('Pragma:no-cache');
  8. //....
  10. ?>

action有这样的一个方法生成令牌,代码如下:

  1. protected String generateToken(HttpServletRequest request) {
  2.        HttpSession session = request.getSession();
  3.        try {
  4.            byte id[] = session.getId().getBytes();
  5.            byte now[] =
  6.                new Long(System.currentTimeMillis()).toString().getBytes();
  7.            MessageDigest md = MessageDigest.getInstance("MD5");
  8.            md.update(id);
  9.            md.update(now);
  10.            return (toHex(md.digest()));
  11.        } catch (IllegalStateException e) {
  12.            return (null);
  13.        } catch (NoSuchAlgorithmException e) {
  14.            return (null);
  15.        }
  16.    }

asp来做实例

表单文件formtest.asp,代码如下:

  1. <%
  2. 　　Randomize　'初始代随机数种子
  3. 　　num1=rnd() '产生随机数num1
  4. 　　num1=int(26*num1)+65　'修改num1的范围以使其是A-Z范围的Ascii码，以防表单名出错
  5. 　　session("antry")="test"&chr(num1)　'产生随机字符串
  6. %>
  7. <form name="test" action="testact.asp" method="post">
  8. 你的名字：<input type='text' name='' size=30>　 '注意本行中使用了随机表单项名
  9. <input type='submit' value='提交'>
  10. </form>

表单处理程序testact.asp,代码如下:

  1. <%
  2. 　　teststr=request.form(session("antry"))
  3. 　　if teststr="" then
  4. 　　　response.write "没有填写姓名或重复提交"
  5. 　　　'由于用户没有填写名字，或表单被重复提交(标志为session("antry")为空)引起
  6. 　　else
  7. 　　　response.write teststr
  8. 　　　session("antry")=""　　'提交成功，清空session("antry")，以防重复提交！！
  9. 　　end if
  10. %>

在这里，你只需随机化一个必填项目的表单项名即可，不必随机化所有的表单项目.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script type="text/javascript">
var checkSubmitFlg = false;
function checkSubmit() {
 if (!checkSubmitFlg) {
 
// 第一次提交
  checkSubmitFlg = true;
  return true;
 } else {
 
//重复提交
  alert("稍等即可,请不要重复提交!如果等一会了还无反应，请刷新从新操作一遍！");
  return false;
 }
}
</script>
<input title="按 Enter 键可随时提交您的修改" name="articlesubmit" type="submit" value="提交" />

布施恩德可便相知重

微信扫一扫打赏

支付宝扫一扫打赏

×

给我留言