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