一個JavaScript防止表單重復(fù)提交的實例
更新時間：2014年10月21日 16:54:24 投稿：whsnow
防止重復(fù)表單提交的方法有很多，本文使用JavaScript來實現(xiàn)防止表單重復(fù)提交，很簡單，但很實用，新手朋友們不要錯過
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>防止重復(fù)表單提交</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 () {
// 防止重復(fù)的表單提交
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>
<div id="message"></div>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了JS原生帶縮略圖的圖片切換效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
js中setTimeout()與clearTimeout()用法實例淺析
這篇文章主要介紹了js中setTimeout()與clearTimeout()用法,以實例形式分析了setTimeout()與clearTimeout()的功能與使用技巧,需要的朋友可以參考下2015-05-05
JS實現(xiàn)定時自動關(guān)閉DIV層提示框的方法
這篇文章主要介紹了JS實現(xiàn)定時自動關(guān)閉DIV層提示框的方法,可實現(xiàn)加載時載入js代碼控制div層提示框自動關(guān)閉的效果,非常簡單實用,需要的朋友可以參考下2015-05-05
從零使用TypeScript開發(fā)項目打包發(fā)布到npm
這篇文章主要介紹了從零使用TypeScript開發(fā)項目打包發(fā)布到npm，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
基于JavaScript構(gòu)建一個動態(tài)博客應(yīng)用
這篇文章主要為大家詳細介紹了如何基于JavaScript構(gòu)建一個動態(tài)博客應(yīng)用,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
window.setInterval()方法的定義和用法及offsetLeft與style.left的區(qū)別
window.setInterval()方法可以按照指定的周期執(zhí)行來執(zhí)行一段程序。周期是以毫秒為單位的，本文給大家介紹window.setInterval()方法的定義和用法，感興趣的朋友參考下2015-11-11
javascript表單處理具體實現(xiàn)代碼(表單、鏈接、按鈕)
這篇文章主要介紹了javascript表單處理具體實現(xiàn)代碼，包括各種表單、鏈接、按鈕控件介紹，感興趣的朋友可以參考一下2016-05-05
這篇文章主要介紹了css結(jié)合js制作下拉菜單的具體實現(xiàn),需要的朋友可以參考下2014-02-02
本文主要介紹了拖動時防止選中的小知識點。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了js實現(xiàn)class樣式的修改、添加及刪除的方法,主要通過修改標簽的className來實現(xiàn)這一功能,非常具有實用價值,需要的朋友可以參考下2015-01-01