如何防止表单重复提交

利用JavaScript防止表单重复提交

　　既然存在上述所说的表单重复提交问题，那么我们就要想办法解决，比较常用的方法是采用JavaScript来防止表单重复提交，具体做法如下：

修改form.jsp页面，添加如下的JavaScript代码来防止表单重复提交

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <!DOCTYPE HTML>
 3 <html>
 4   <head>
 5     <title>Form表单</title>
 6         <script type="text/javascript">
 7         var isCommitted = false;//表单是否已经提交标识，默认为false
 8         function dosubmit(){
 9             if(isCommitted==false){
10                 isCommitted = true;//提交表单后，将表单是否已经提交标识设置为true
11                 return true;//返回true让表单正常提交
12             }else{
13                 return false;//返回false那么表单将不提交
14             }
15         }
16     </script>
17   </head>
18   
19   <body>
20       <form action="${pageContext.request.contextPath}/servlet/DoFormServlet" onsubmit="return dosubmit()" method="post">
21         用户名：<input type="text" name="username">
22         <input type="submit" value="提交" id="submit">
23     </form>
24   </body>
25 </html>

　　我们看看使用了JavaScript来防止表单提交重复是否可以成功，运行效果如下：

如何防止表单重复提交

　　可以看到，针对"在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交"这个应用场景，使用JavaScript是可以解决这个问题的，解决的做法就是"用JavaScript控制Form表单只能提交一次"。

　　除了用这种方式之外，经常见的另一种方式就是表单提交之后，将提交按钮设置为不可用，让用户没有机会点击第二次提交按钮，代码如下：

1 function dosubmit(){
2     //获取表单提交按钮
3     var btnSubmit = document.getElementById("submit");
4     //将表单提交按钮设置为不可用，这样就可以避免用户再次点击提交按钮
5     btnSubmit.disabled= "disabled";
6     //返回true让表单可以正常提交
7     return true;
8 }

运行效果如下：

如何防止表单重复提交

　　另外还有一种做法就是提交表单后，将提交按钮隐藏起来，这种做法和将提交按钮设置为不可用是差不多的，个人觉得将提交按钮隐藏影响到页面布局的美观，并且可能会让用户误以为是bug(怎么我一点击按钮，按钮就不见了呢？用户可能会有这样的疑问)，我个人在开发中用得比较多的是表单提交后，将提交按钮设置为不可用，反正使用JavaScript防止表单重复提交的做法都是差不多的，目的都是让表单只能提交一次，这样就可以做到表单不重复提交了。