JavaScript Two Ways to Prevent Multiple Submissions from User
- 2021-07-04 18:17:24
- OfStack
"When the server is overloaded, there will be a phenomenon of submission jamming, but when the user is operating, he will repeatedly click Submit, which will cause greater pressure on the server. So we need to limit it."
[1] Disable Submit Button
<html>
<head>
<script>
// Disable default behavior Because this is to simulate the server overload, it needs to be prohibited first submit Button automatic submission function
function preventDef(event){
event=event||window.event;
if(event.preventDefault){
return event.preventDefault;
}else{
return event.returnValue=false;
}
}
window.onload=function(){
var form=document.getElementsByTagName('form')[0]; // Get to form Element
var txt=form.elements['txt']; // Get to name Property is txt Form elements of
var sub=form.elements['sub']; // Get to name Property is sub Form elements of
form.onsubmit=function(event){ // Create 1 Commit events because submit Yes form To submit the event, so we need to pass the form To ban
event=event || window.event;
preventDef(event); // Disable default commit behavior
sub.disabled=true // No. 1 1 One is to disable the button after the user submits, and then release the button after waiting for the user to submit
setTimeout(function(){ // Simulation 5 Submit in seconds
form.submit()},5000);
}
}
</script>
</head>
<body>
<form id="form">
<input type="text" id="txt" name="txt">
<input type="submit" id="sub">
</form>
</body>
</html>
[Type 2 Creates 1 Variable for Judgment]
[1] Disable Submit Button
<html>
<head>
<script>
// Disable default behavior Because this is to simulate the server overload, it needs to be prohibited first submit Button automatic submission function
function preventDef(event){
event=event||window.event;
if(event.preventDefault){
return event.preventDefault;
}else{
return event.returnValue=false;
}
}
window.onload=function(){
var form=document.getElementsByTagName('form')[0]; // Get to form Element
var txt=form.elements['txt']; // Get to name Property is txt Form elements of
var sub=form.elements['sub']; // Get to name Property is sub Form elements of
var flag=true; // Create first 1 Variable, indicating that the user has not clicked Submit by default
form.onsubmit=function(event){ // Create 1 Commit events because submit Yes form To submit the event, so we need to pass the form To ban
event=event || window.event;
preventDef(event); // Disable default commit behavior
if(flag==true){
flag=false; // Indicates that the user has clicked the Submit button
}else{
alert(' Submission in progress, please do not repeat submission ') ;
}
setTimeout(function(){ // Simulation 5 Submit in seconds
form.submit()},5000);
}
}
</script>
</head>
<body>
<form id="form">
<input type="text" id="txt" name="txt">
<input type="submit" id="sub">
</form>
</body>
</html>
Two Ways to Prevent Multiple Submissions in JavaScript
"When the server is overloaded, there will be a phenomenon of submission jamming, but when the user is operating, he will repeatedly click Submit, which will cause greater pressure on the server. So we need to limit it."
[1] Disable Submit Button
<html>
<head>
<script>
// Disable default behavior Because this is to simulate the server overload, it needs to be prohibited first submit Button automatic submission function
function preventDef(event){
event=event||window.event;
if(event.preventDefault){
return event.preventDefault;
}else{
return event.returnValue=false;
}
}
window.onload=function(){
var form=document.getElementsByTagName('form')[0]; // Get to form Element
var txt=form.elements['txt']; // Get to name Property is txt Form elements of
var sub=form.elements['sub']; // Get to name Property is sub Form elements of
form.onsubmit=function(event){ // Create 1 Commit events because submit Yes form To submit the event, so we need to pass the form To ban
event=event || window.event;
preventDef(event); // Disable default commit behavior
sub.disabled=true // No. 1 1 One is to disable the button after the user submits, and then release the button after waiting for the user to submit
setTimeout(function(){ // Simulation 5 Submit in seconds
form.submit()},5000);
}
}
</script>
</head>
<body>
<form id="form">
<input type="text" id="txt" name="txt">
<input type="submit" id="sub">
</form>
</body>
</html>
[Type 2 Creates 1 Variable for Judgment]
[1] Disable Submit Button
<html>
<head>
<script>
// Disable default behavior Because this is to simulate the server overload, it needs to be prohibited first submit Button automatic submission function
function preventDef(event){
event=event||window.event;
if(event.preventDefault){
return event.preventDefault;
}else{
return event.returnValue=false;
}
}
window.onload=function(){
var form=document.getElementsByTagName('form')[0]; // Get to form Element
var txt=form.elements['txt']; // Get to name Property is txt Form elements of
var sub=form.elements['sub']; // Get to name Property is sub Form elements of
var flag=true; // Create first 1 Variable, indicating that the user has not clicked Submit by default
form.onsubmit=function(event){ // Create 1 Commit events because submit Yes form To submit the event, so we need to pass the form To ban
event=event || window.event;
preventDef(event); // Disable default commit behavior
if(flag==true){
flag=false; // Indicates that the user has clicked the Submit button
}else{
alert(' Submission in progress, please do not repeat submission ') ;
}
setTimeout(function(){ // Simulation 5 Submit in seconds
form.submit()},5000);
}
}
</script>
</head>
<body>
<form id="form">
<input type="text" id="txt" name="txt">
<input type="submit" id="sub">
</form>
</body>
</html>
Above is the site to introduce JavaScript users to prohibit multiple submission of the two methods of related information, I hope to help you!