一個JavaScript防止表單重復提交的實例

2024-05-06 16:09:58

字體：大中小

來源：轉載

供稿：網(wǎng)友

防止重復表單提交的方法有很多，本文使用JavaScript來實現(xiàn)防止表單重復提交，很簡單，但很實用，新手朋友們不要錯過

<!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>

<div id="message"></div>

</body>

</html>