jQuery Disable Button After Click

We always use a button in HTML form for submission. When a website responds slow to user after click on the button then, user click multiple times on it.

Multiple click on the submit button, send multiple request to the server for processing which is not good for any web application.

This tutorial will help you to understand how to prevent multiple click on submit button using jQuery.

In this tutorial, using jquery disable button after the click and prevent from form submission again.

This will help you to disable button after a click for a few seconds. You can change them as per your need.

Live Demo

Let’s see snippet

HTML

<input type='button' id="btn" value="Click"/>  

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
<script> 
$(document).ready(function(){ 
$('#btn').click(function() {      
var btn = $(this);      
btn.prop('disabled', true);     
setTimeout(function() {         
btn.prop('disabled', false);     
},5000);   // enable after 5 seconds 
}); 
}); </script>   

Hope you have learned how to prevent multiple clicks on submit button in jquery . If you have any query regarding this tutorial, feel free to comment.