Preventing duplicate form submissions by disabling the submit button
This approach involves using jQuery, to disable the submit button immediately upon form submission. By disabling the button, users are unable to click it multiple times, effectively preventing duplicate form submissions, enhancing user experience and preventing unintended actions.
Example: Implementation of preventing duplicate submission in a form by disabling the submit button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Prevent Duplicate Form Submission</title>
<style>
.navbar {
background-color: #333;
padding: 10px 0;
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
}
.logo {
width: 80px;
height: auto;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script>
$(document).ready(function () {
$('#myForm').submit(function (event) {
// Prevent default form submission
event.preventDefault();
// Check if the form has already been submitted
if ($(this).data('submitted')) {
return;
}
// Disable the submit button
$('#submitBtn').prop('disabled', true);
let formData = $(this).serialize();
$('#submittedData').html(formData);
$('#statusMessage').text('Submitting...');
$(this).data('submitted', true);
setTimeout(function () {
$('#statusMessage').text('');
}, 3000);
});
});
</script>
</head>
<body>
<nav class="navbar">
<div class="logo-container">
<img alt="Logo" class="logo" src=
"https://media.w3wiki.org/gfg-gg-logo.svg" />
</div>
</nav><br />
<h2>Prevent duplicate submission
in a form using jQuery
</h2>
<form id="myForm">
<input type="text" name="name"
placeholder="Name" required><br>
<input type="email" name="email"
placeholder="Email" required><br>
<input type="submit" id="submitBtn"
value="Submit">
</form>
<p id="statusMessage"></p>
<div id="submittedData">
</div>
</body>
</html>
Output:
How to prevent duplicate submission in a form using jQuery?
Preventing duplicate submission in a form using jQuery involves implementing measures to ensure that the form is only submitted once, regardless of how many times the user interacts with the submit button. To prevent duplicate form submissions in web applications using jQuery we can use various methods like One-time event binding and disabling submit button.
Use the below approaches to prevent duplicate submissions in a form using jQuery:
Table of Content
- Using One-Time Event Binding
- By disabling the submit button