Good content takes time and effort to come up with.
Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.
Prevent Multiple Form Submits
13th May 2021
3 mins read
Share On
Hi, Let's see a quick way to prevent your customers or users from submitting forms multiple times with simple CSS & Javascript.
Step 1 - Your HTML Form
You might have a form for which the HTML might look similar to the following.
<form action="" method="post" class="form-prevent-multiple-submits">
<div class="mt-2">
<textarea name="description" id="description" rows="3" class="form-control form-control-sm"></textarea>
</div>
<div class="mt-1">
<button type="submit" class="btn btn-sm btn-primary button-prevent-multiple-submits">
<i class="fas fa-spinner spinner"></i> Comment
</button>
</div>
</form>
It's just a form with a textarea and submit button which looks like the following. Observe the following classes in form & submit the button we will use to disable the submit button.
<form class="form-prevent-multiple-submits">
<button class="button-prevent-multiple-submits">
<i class="fas fa-spinner spinner d-none"></i> Comment
</button>
Step 2 - Simple Animation To Rotate The Spinner In Button
multiple-form-submit-prevent.css
/** Hide spinner on page load */
.spinner{
display: none;
}
/** Code to rotate the spinnner with keyframes */
.button-prevent-multiple-submits .spinner{
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
Step 3 - Javascript To Disable The Button
multiple-form-submit-prevent.js
/** On submit of the form disable the submit button and display the spinner */
$('.form-prevent-multiple-submits').on('submit', function() {
$('.button-prevent-multiple-submits').attr('disabled', true);
$('.button-prevent-multiple-submits .spinner').show();
});
Complete Form Example
In the following code, I have used FontAwesome, Bootstrap 4, jQuery files. If you have only jQuery then the code is good to go.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Prevent Multiple Form Submit Example</title>
<!-- Fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<!-- Bootsgrap CSS file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<!-- Link to your CSS file -->
<link rel="stylesheet" href="multiple-form-submit-prevent.css">
<!-- Bootstrap & jQuery file -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Link to your Javascript file -->
<script src="multiple-form-submit-prevent.js"></script>
</head>
<body>
<form action="" method="post" class="form-prevent-multiple-submits">
<div class="mt-2">
<textarea name="description" id="description" rows="3" class="form-control form-control-sm"></textarea>
</div>
<div class="mt-1">
<button type="submit" class="btn btn-sm btn-primary button-prevent-multiple-submits">
<i class="fas fa-spinner spinner d-none"></i> Comment
</button>
</div>
</form>
</body>
</html>
Articles For You
NGINX Security Best Practices & Optimization
Client-Side DataTable, Adding Super Powers To HTML Table
Generate Fake Data In PHP With Faker
Push Files To CPanel / Remote Server using FTP Software FileZilla
Proper Way To Validate MIME Type Of Files While Handling File Uploads In PHP
Install NGINX In Linux / Ubuntu And Managing
composer.json v/s composer.lock
Automate Repeating Tasks In Linux Server With Cronjobs
Stripe Payment Integration With Laravel
Lazy Load YouTube And Other Videos In Website
PHP file_put_contents failed to open stream: Permission denied
