Preventing multiple clicks on button

I found this solution that is simple and worked for me:

<form ...> <input ...> <button ... onclick="this.disabled=true;this.value='Submitting...'; this.form.submit();"> </form> 

This solution was found in: Original solution

JS provides an easy solution by using the event properties:

$('selector').click(function(event) { if(!event.detail || event.detail == 1){//activate on first click only to avoid hiding again on multiple clicks // code here. // It will execute only once on multiple clicks } }); 

disable the button on click, enable it after the operation completes

$(document).ready(function () { $("#btn").on("click", function() { $(this).attr("disabled", "disabled"); doWork(); //this method contains your logic }); }); function doWork() { alert("doing work"); //actually this function will do something and when processing is done the button is enabled by removing the 'disabled' attribute //I use setTimeout so you can see the button can only be clicked once, and can't be clicked again while work is being done setTimeout('$("#btn").removeAttr("disabled")', 1500); } 

working example

I modified the solution by @Kalyani and so far it's been working beautifully!

$('selector').click(function(event) { if(!event.detail || event.detail == 1){ return true; } else { return false; } }); 

Disable pointer events in the first line of your callback, and then resume them on the last line.

element.on('click', function() { element.css('pointer-events', 'none'); //do all of your stuff element.css('pointer-events', 'auto'); }; 

you can use jQuery's [one][1] :

.one( events [, data ], handler ) Returns: jQuery

Description: Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

see examples:

using jQuery: https://codepen.io/loicjaouen/pen/RwweLVx

// add an even listener that will run only once $("#click_here_button").one("click", once_callback); 

After hours of searching i fixed it in this way:

 old_timestamp = null; $('#productivity_table').on('click', function(event) { // code executed at first load // not working if you press too many clicks, it waits 1 second if(old_timestamp == null || old_timestamp + 1000 < event.timeStamp) { // write the code / slide / fade / whatever old_timestamp = event.timeStamp; } }); 

May be this will help and give the desired functionality :

$('#disable').on('click', function(){ $('#disable').attr("disabled", true); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="disable">Disable Me!</button> <p>Hello</p>

The absolute best way I've found is to immediately disable the button when clicked:

$('#myButton').click(function() { $('#myButton').prop('disabled', true); }); 

And re-enable it when needed, for example:

• validation failed
• error while processing the form data by the server, then after an error response using jQuery

Another way to avoid a quick double-click is to use the native JavaScript function ondblclick, but in this case it doesn't work if the submit form works through jQuery.

using count,

 clickcount++; if (clickcount == 1) {} 

After coming back again clickcount set to zero.

We can use on and off click for preventing Multiple clicks. i tried it to my application and it's working as expected.

$(document).ready(function () { $("#disable").on('click', function () { $(this).off('click'); // enter code here }); }) 

This should work for you:

$(document).ready(function () { $('.applicationButton').click(function (e) { var btn = $(this), isPageValid = Page_ClientValidate(); // cache state of page validation if (!isPageValid) { // page isn't valid, block form submission e.preventDefault(); } // disable the button only if the page is valid. // when the postback returns, the button will be re-enabled by default btn.prop('disabled', isPageValid); return isPageValid; }); }); 

Please note that you should also take steps server-side to prevent double-posts as not every visitor to your site will be polite enough to visit it with a browser (let alone a JavaScript-enabled browser).

Plain JavaScript:

1. Set an attribute to the element being interacted
2. Remove the attribute after a timeout
3. If the element has the attribute, do nothing

const throttleInput = document.querySelector('button'); throttleInput.onclick = function() { if (!throttleInput.hasAttribute('data-prevent-double-click')) { throttleInput.setAttribute('data-prevent-double-click', true); throttleInput.setAttribute('disabled', true); document.body.append("Foo!"); } setTimeout(function() { throttleInput.removeAttribute('disabled'); throttleInput.removeAttribute('data-prevent-double-click'); }, 3000); }

<button>Click to add "Foo"!</button>

I have found this to be simple and effective cross-browser:

<script> var $link_clicked=false; </script> <a onclick="if($link_clicked)return false; $link_clicked=true; What_You_Want_to_happen_once_goes_here..." >Click once HERE</a> 

One way you do this is set a counter and if number exceeds the certain number return false. easy as this.

var mybutton_counter=0; $("#mybutton").on('click', function(e){ if (mybutton_counter>0){return false;} //you can set the number to any //your call mybutton_counter++; //incremental }); 

make sure, if statement is on top of your call.

If you are doing a full round-trip post-back, you can just make the button disappear. If there are validation errors, the button will be visible again upon reload of the page.

First set add a style to your button:

<h:commandButton id="SaveBtn" value="Save" styleClass="hideOnClick" actionListener="#{someBean.saveAction()}"/> 

Then make it hide when clicked.

$(document).ready(function() { $(".hideOnClick").click(function(e) { $(e.toElement).hide(); }); }); 

Just copy paste this code in your script and edit #button1 with your button id and it will resolve your issue.

 <script type="text/javascript"> $(document).ready(function(){ $("#button1").submit(function() { $(this).submit(function() { return false; }); return true; }); }); </script 

We also set the button to .disabled=true. I added the HTML Command input with type hidden to identify if the transaction has been added by the Computer Server to the Database.

Example HTML and PHP Commands:

<button onclick="myAddFunction(<?php echo $value['patient_id'];?>)" id="addButtonId">ADD</button> <input type="hidden" id="hasPatientInListParam" value="<?php echo $hasPatientInListParamValue;?>"> 

Example Javascript Command:

function myAddFunction(patientId) { document.getElementById("addButtonId").disabled=true; var hasPatientInList = document.getElementById("hasPatientInListParam").value; if (hasPatientInList) { alert("Only one (1) patient in each List."); return; } window.location.href = "webAddress/addTransaction/"+patientId; //reloads page } 

After reloading the page, the computer auto-sets the button to .disabled=false. At present, these actions prevent the multiple clicks problem in our case.

I hope these help you too.

Thank you.

One way I found that works is using bootstrap css to display a modal window with a spinner on it. This way nothing in the background can be clicked. Just need to make sure that you hide the modal window again after your long process completes.

so I found a simple solution, hope this helps.

all I had to do was create a counter = 0, and make the function that runs when clicked only runnable if the counter is = 0, when someone clicks the function the first line in the function sets counter = 1 and this will prevent the user from running the function multiple times when the function is done the last line of the code inside the function sets counter to 0 again

you could use a structure like this, it will execute just once:

document.getElementById('buttonID').addEventListener('click', () => { ...Do things... },{once:true});