阻止重复表单提交
上一篇 /
下一篇 2012-06-06 22:02:56
/ 个人分类：javascript
阻止重复表单提交在web系统中很重要。
如果是在页面级别就经常用javascript来处理。
如果要求更加严格，就需要在数据库级别也要进行判断处理。
今天先了解了下，javascript的一种方式，就是点击提交按钮后，将提交按钮变为灰色，这样用户就不能重复提交了。
下面是示例代码
<html>
<head>
<title>Prevent Duplication Form. Submission</title>
<style type="text/css">
#refresh{
display: none;
width: 200px; height: 20px;
background-color: #ffff00;
}
</style>
<script>
//<!{CDATA{
var inprocess = false;
var radio = true;
window.onload = function(){
document.forms["picker"].onsubmit = validateSubmit;
document.getElementById("refresh").onclick = startOver;
document.getElementById("radio1").onclick = cancelradio;
}
function validateSubmit(){
if (inprocess) return;
inprocess = true;
document.getElementById("submitbutton").disabled = true;
document.getElementById("refresh").style.display = "block";
document.getElementById("message").innerHTML = "<p>已经提交处理请稍等.</p>";
return false;
}
function startOver(){
inprocess = false;
document.getElementById("submitbutton").disabled = false;
document.getElementById("message").innerHTML="";
document.getElementById("refresh").style.display = "none";
document.getElementById("intext").value="";
document.getElementById("radio1").checked = false;
}
function cancelradio(){
if(radio) {
radio = false;
return;
}
document.getElementById("radio1").checked = false;
radio = true;
}
//--><!]]
</script>
</head>
<body>
<form. id="picker" method="post" action="">
Group1:<input type="radio" name="group1" id = "radio1" value="one" />
Group2:<input type="radio" name="group1" value="two" />
Group3:<input type="radio" name="group1" value="three" /><br />
<br />
Input 1:<input type="text" id="intext" />
Input 2:<input type="text" id="intext2" />
Input 3:<input type="text" id="intext3" />
<input type="submit" id="submitbutton" value="Send form" />
</form>
<div id="refresh">
<p>Click to reset example</p>
</div>
<div id="message">
</div>
</body>
</html>
收藏
举报
TAG:
