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

本文主要是介绍Jquery 实现表单提交按钮变灰，防止多次点击提交重复数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

表单提交时候我们应该控制提交按钮，不能点击多次进行数据的重复提交。要不然就会有冗余的重复的数据在系统中，造成系统出现数据垃圾。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="提交" οnclick="javascript:{this.disabled=true;document.fm.submit();}"></form>

第二种：

<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，具体可以参考下面这篇博文：