Preventing Double Submissions
In this page:
Disable After Submit
Disabling the submit button the instant a form is submitted prevents the user from accidentally sending it twice by clicking again before the page responds. This is a simple, direct fix for the classic double-submit bug.
Example: Disable After Submit
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><button id="submitBtn" type="submit">Send</button></form>
<script>
$("#myForm").on("submit", function() {
$("#submitBtn").prop("disabled", true);
});
</script>
</body>
</html>Submission Lock
A boolean flag checked at the start of the submit handler can prevent repeated submit handling even if the disable-the-button approach is bypassed somehow, such as by pressing Enter again. The flag is set true on first submit and checked before allowing any further processing.
Example: Submission Lock
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><button type="submit">Send</button></form>
<script>
let submitted = false;
$("#myForm").on("submit", function(event) {
if (submitted) {
event.preventDefault();
return;
}
submitted = true;
});
</script>
</body>
</html>Button Feedback
Changing the button's text to something like 'Submitting...' during processing tells users their action was registered and something is happening, rather than leaving them wondering if the click worked. This kind of feedback reduces the temptation to click again.
Example: Button Feedback
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><button id="submitBtn" type="submit">Send</button></form>
<script>
$("#myForm").on("submit", function() {
$("#submitBtn").text("Submitting...");
});
</script>
</body>
</html>Async Submission
For AJAX submissions specifically, the button should stay locked until the request actually completes -- success or failure -- since the page never reloads to naturally reset the button's state. Re-enabling it only after the response arrives keeps the protection accurate.
Example: Async Submission
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="submitBtn">Send</button>
<script>
$("#submitBtn").on("click", function() {
$(this).prop("disabled", true);
setTimeout(function() {
$("#submitBtn").prop("disabled", false);
}, 1000);
});
</script>
</body>
</html>Complete Protection
Combining validation, a submission lock, and button feedback covers double-submission from every angle: catching bad input before it's sent, blocking a second submit attempt, and clearly showing the user that processing is underway.
Example: Complete Protection
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><input id="name"><button id="submitBtn" type="submit">Send</button></form>
<script>
$("#myForm").on("submit", function(event) {
if ($("#name").val().trim() === "") {
event.preventDefault();
return;
}
$("#submitBtn").prop("disabled", true).text("Submitting...");
});
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: