Table of contents

Prevent Double Click in jQuery

In this post, I will show you how to prevent double click in jquery/javascript when submitting the button to ajax. This is important to implement because we don't know if your user doubled the click and it was submitted to your server. So here is the sample code below:

 

Basic Example

1. HTML Code

<button id="btnSubmit">Prevent Double Click</button>

 

2. Javascript Code

$(document).ready(function() {

	$("#btnSubmit").on("click", function() {
		var $this = $(this);

        $this.attr('disabled', true);
	});

});

 

As you can see above we have "$this.attr('disabled', true)". This function will help you to disabled the button when clicking but take not after we clicked the button will remain disabled. So next we will implement it using ajax and after the server responds to the client-side then we will remove the disabled attribute to the button.

 

Advance Example

1. HTML Code

<form action="save.php" id="form">
	<div class="form-group">
	    <label for="email">Email</label>
	    <input class="form-control" type="text" name="email">
  	</div>
  	<div class="form-group">
	    <label for="first_name">First Name</label>
	    <input class="form-control" type="text" name="first_name">
  	</div>
  	<div class="form-group">
	    <label for="last_name">Last Name</label>
	    <input class="form-control" type="text" name="last_name">
  	</div>
  	<div class="form-group">
	    <label for="address">Address</label>
	    <textarea class="form-control" type="text" name="address" rows="3"></textarea>
  	</div>
  	<button type="button" class="btn btn-primary" id="btnSubmit">Submit</button>
</form>

 

2. Javascript Code

$(document).ready(function() {

	$("#btnSubmit").on("click", function() {
		var $this 		    = $(this); //submit button selector using ID
        var $caption        = $this.html();// We store the html content of the submit button
        var form 			= "#form"; //defined the #form ID
        var formData        = $(form).serializeArray(); //serialize the form into array
        var route 			= $(form).attr('action'); //get the route using attribute action

        // Ajax config
    	$.ajax({
	        type: "POST", //we are using POST method to submit the data to the server side
	        url: route, // get the route value
	        data: formData, // our serialized array data for server side
	        beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
                //prevent double click and disable the button after click
                //also added content "Processing..." to the button
	            $this.attr('disabled', true).html("Processing...");
	        },
	        success: function (response) {//once the request successfully process to the server side it will return result here
	            //remove the disabled button attribute
	        	$this.attr('disabled', false).html($caption);
	        },
	        error: function (XMLHttpRequest, textStatus, errorThrown) {
	        	// You can put something here if there is an error from submitted request
	        }
	    });
	});
});

 

As you can see above code I added the disable function for the button "$this.attr('disabled', true).html("Processing...");" inside beforeSend() function on ajax. Then in the success() function on ajax a remove the disabled attribute/function so that the button will be clickable again after being submitted to the server.

 

I hope this example will help you. Thank you for reading. Happy coding :)

 

Read next