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

php中文网

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

1612人浏览过

来源于php中文网

原创

<!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 flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/932" title="Heeyo"><img
                                                                                src="https://img.php.cn/upload/ai_manual/000/000/000/175680026078870.png" alt="Heeyo"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/932" title="Heeyo">Heeyo</a>
                                                                        <p>Heeyo：AI儿童启蒙陪伴师，风靡于硅谷的儿童AI导师和玩伴</p>
                                                                </div>
                                                                <a href="/ai/932" title="Heeyo" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div> 
</div> 
<div id="message"></div> 
</body> 
</html>

如何用正则表达式提取字符串中符号两侧的数字

EJS 单页应用中 DOM 节点迁移导致视图丢失的根源与修复方案

如何在动态表格中为每行删除按钮正确绑定任务 ID 并执行 API 删除操作

EJS 单页应用中路由视图切换时 DOM 丢失的根源与修复方案

如何在动态渲染的表格中为每行添加删除按钮并准确传递任务 ID