1,禁用submit按钮,防止重复提交
复制代码 代码示例:
<script>
function
disabledButton() {
$("input[@type='submit']").each(function () {
$(this).bind("click", function () {
$(this).attr("disabled", true);
$(this).parents().filter("form").trigger("submit");
});
});
}
var initFun = window.onload;
if (initFun == null) {
window.onload = disabledButton;
} else {
window.onload = function () {
initFun();
disabledButton();
};
}
</script>
生成js文件,页面加载就可以了.用submit 按钮生效。
2,jquery 中禁止表单多次提交
在jquery 中,防止提交多次表单其实是很简单的,代码如下:
复制代码 代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Safe submit with jQuery</title>
<script type="text/
javascript" src="/js/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(
$(":input").attr("disabled", true);
var dataString = 'name=test';
$.ajax({
type: "POST",
url: "1.php",
data: dataString,
success: function(){
$(":input").removeAttr('disabled');
}
});
return false;
});
});
</script>
</head>
<body>
<form>
Name:<input type="test" name="name" id="name" />
<input type="submit" name="submit" id="submit" />
</form>
</body>
</html>
3,jQuery防止多次提交
web应用中常见的问题就是多次提交,由于表单提交的延迟,有时几秒或者更长,让用户有机会多次点 击提交按钮,从而导致服务器端代码的种种麻烦。
可以绑定处理程序到表单的提交事件上,在提交按钮第一次点击之后禁止提交按钮。
复制代码 代码示例:
$("form").submit(function(){
$(":submit",this).attr("disabled","disabled");
});
在事件处理程序体内,用:submit选择器来获取表单内所有的提交按钮,并将disable特性值改为disabled(w3c官方推 荐的特性设置)。
不过要注意,建立匹配集的时候我们提供this的上下文值,this指针总是引用已绑定事件的页面元素。
以这种方式禁止提交按钮,不会免除服务器代码的责任。
预防双重提交或者其它类型的验证问题。添加这种代码到客户端能够提高终端用户的界面友好程度,服务器端的代码安全还是要继续加强的。