Hi, Let's see a quick way to prevent your customers or users from submitting forms multiple times with simple CSS & Javascript.
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>
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); } }
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();
});
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>
SummerNote WYSIWYG Text Editor Save Images To Public Path In PHP Laravel
Install NGINX In Linux / Ubuntu And Managing
Debugging Laravel Queue Email Issues
Install Letsencrypt SSL Certificate for RabbitMQ Server and RabbitMQ Management Tool
Lazy Load YouTube And Other Videos In Website
Create A Composer Package? Test It Locally And Add To Packagist Repository
Add Google ADS In AMP (Accelerated Mobile Pages) Website
Generate RSS Feeds in PHP Laravel
What Is Laravel Resourceful Controllers?
Create Custom 404 Page In Laravel
Generate Fake Data In PHP With Faker
Comment And Like System Using Disqus
Laravel Last Executed Query In Plain SQL Statement For Debugging