Prevent a double click on a button with knockout.js

Question

What is the best way to disable a button so a double click doesn't occur with knockout.js. I have some users doing some quick clicking causing multiple ajax requests. I assume knockout.js can handle this in several ways and wanted to see some of the alternatives out there.

score 14 · Accepted Answer · answered Apr 24 '12 at 22:29

Use a semaphore (spinning lock). Basically, you count how many clicks an element has registered and if it is more than 1 you return false and don't allow the following clicks. A timeout function could be used to clear the lock so that they could click again after say, 5 seconds. You could modify the example from http://knockoutjs.com/documentation/click-binding.html

As seen here:

<div>
 You've clicked <span data-bind="text: numberOfClicks"></span> times
 <button data-bind="click: incrementClickCounter">Click me</button>
</div>

<script type="text/javascript">
 var viewModel = {
     numberOfClicks : ko.observable(0),
     incrementClickCounter : function() {
         var previousCount = this.numberOfClicks();
         this.numberOfClicks(previousCount + 1);
     }
 };
</script>

By changing the logic inside the nested function to

if( this.numberOfClicks() > 1 ){
 //TODO: Handle multiple clicks or simply return false
 // and perhaps implement a timeout which clears the lockout
}

Great answer! This could also be refactored into a custom click binding. — madcapnmckay, Apr 24 '12 at 22:53
Perfect answer. I went ahead and wrapped all my calls in that with no issue, and reset the clicks after each ajax call, generically of course. I wonder how a custom binding might look like. — Mike Flynn, Apr 24 '12 at 23:47

score 12 · Answer 2 · answered Aug 07 '12 at 18:40

I ran into a similar problem with a form wizard submitting data via Ajax on button click. We have 4 buttons selectively visible for each step. We created a boolean observable ButtonLock and returned from the submission function if it was true. Then we also data-bound the disable of each button to the ButtonLock observable

ViewModel:

var viewModel = function(...) {
    self.ButtonLock = ko.observable(false);

    self.AdvanceStep = function (action) {
        self.ButtonLock(true);
        // Do stuff
        // Ajax call
    }

    self.AjaxCallback = function(data) {
        // Handle response, update UI
        self.ButtonLock(false);
    }

Button:

<input type="button" id="FormContinue" name="FormContinue" class="ActionButton ContinueButton"
    data-bind="
        if: CurrentStep().actions.continueAction,
        disable: ButtonLock,
        value: CurrentStep().actions.continueAction.buttonText,
        click: function() {
            AdvanceStep(CurrentStep().actions.continueAction);
        }"/>

If you just need to prevent multiple clicks, I prefer the boolean. But the counter method lets you detect double clicks and handle them separately, if you want that feature.

I like this answer more. It gives user some visual indicator on what's happening vs. the counting approach. The user could click the button repeatedly and with no indicator what's happening so they may think something broke. — Morgan T., Aug 28 '12 at 14:55

score 7 · Answer 3 · answered Feb 18 '16 at 14:07

In case anyone is still looking for a way to do this. I found that You can use a boolean.

self.disableSubmitButton= ko.observable(false);
  self.SubmitPayment = function () {
        self.disableSubmitButton(true);
       //your other actions here
        }

Then in your view

data-bind="click:SubmitPayment, disable:disableSubmitButton"

score 1 · Answer 4 · answered Feb 05 '18 at 10:38

I did this with a custom binding:

<button data-bind="throttleClick: function() { console.log(new Date()); }>
    I wont double click quicker than 800ms
</button>

ko.bindingHandlers.throttleClick = {
    init: function(element, valueAccessor) {
        var preventClick = false;
        var handler = ko.unwrap(valueAccessor());

        $(element).click(function() {
            if(preventClick)
                return;

            preventClick = true;
            handler.call();
            setTimeout(function() { preventClick = false; }, 800);
        })
    }
}

Prevent a double click on a button with knockout.js

4 Answers4

Linked