一个JavaScript防止表单重复提交的实例_javascript技巧-js教程-PHP中文网

一个JavaScript防止表单重复提交的实例_javascript技巧

php中文网

发布： 2016-05-16 16:33:04

原创

1612人浏览过

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>防止重复表单提交</title> 
<style> 
#refresh{ 
display: none; 
width:200px; 
height:20px; 
background-color: #ff0; 

} 

</style> 

<script> 
var inprocess = false; 
window.onload = function(){ 

document.forms["picker"].onsubmit = validateSubmit; 
document.getElementById("refresh").onclick = startOver; 
} 
function validateSubmit () { 
// 防止重复的表单提交 
if (inprocess) return; 
inprocess = true; 
console.log(inprocess); 
document.getElementById("submitbutton").disabled = true; 

document.getElementById("refresh").style.display = "block"; 
document.getElementById("message").innerHTML = "<p>正在processing，稍等</p>"; 
return false; 
} 
function startOver(){ 
inprocess = false; 
document.getElementById("submitbutton").disabled = false; 
document.getElementById("message").innerHTML = ""; 
document.getElementById("refresh").style.display = "none"; 

} 
</script> 
</head> 

<body> 

<form id="picker" method="post" action=""> 
group1:<input type="radio" name="group1" 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>单击我</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1875">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6c50ec09de372.png" alt="Upscale">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1875">Upscale</a>
                            <p>AI图片放大工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Upscale">
                                <span>85</span>
                            </div>
                        </div>
                        <a href="/ai/1875" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Upscale">
                        </a>
                    </div>
                 
</div> 
<div id="message"></div> 
</body> 
</html>

登录后复制