CODEWITHSUNDEEP
javascriptjquery
codepuppy
codepuppy

Reputation: 1140

jQuery Allow a single click but disallow a double click

I originally wanted a submit to take place on a single click event:

    $("#booking_Form #submit_Booking").bind("click", function(event){.....

I then found (obviously) that a double click led to a duplicate submission.

So I tried capturing and suppressing this with:

    $("#booking_Form #submit_Booking").bind("dblclick", function(event){
          return false;
    });

But the single click event still fired twice.

Am I correct it thinking that if it is imperative that a double click does not submit twice that I must change the single click event to a double click event.

Or is there some global way to switch off double clicks.

Upvotes: 5

Views: 18858

Answers (6)

sandip
sandip

Reputation: 1

Before Your logic execute you can disable your button after one click and after executing your code you can enable your button click event. It's simple- 

$("#saveOrder").attr("disabled", true);

Your logic goes here 

$("#saveOrder").attr("disabled", false);

Upvotes: 0

Nelson Benítez León
Nelson Benítez León

Reputation: 50563

Just disable your input in the click handler, so the user cannot click a second time, you will enable it again when you finish the logic in your click handler. So you can do as follows:

$("#booking_Form #submit_Booking").bind("click", function(event){
   $(this).attr('disabled','true');
   ...
   ...
   var btn = $(this);
   $.ajax('someurl.php',{success: function(){
          ...
          ...
          btn.removeAttr('disabled');
    }
   })
}

Upvotes: 4

Dom
Dom

Reputation: 40461

You should use .one(). That way all subsequent clicks will do nothing

$("#booking_Form #submit_Booking").one("click", function(event) {
    //do something
});

Link: http://api.jquery.com/one/

EDIT: If you want to use .one(), how about doing something like this...

JAVASCRIPT:

$(document).ready(function(){
     $("#b1").one("click", function(e){
        ajaxFunction();
     });   

    function ajaxFunction(){
         $("#b1").one("click", function(e){
             ajaxFunction()
         });

        $.ajax({
            type: "POST",
            url: "http://fiddle.jshell.net/", //use actual URL
            success: function(data){
               //do something    
            }
        });           
    }
});​

DEMO: http://jsfiddle.net/BKqm9/13/

Upvotes: 7

palaѕн
palaѕн

Reputation: 73896

This might help:

$("#booking_Form #submit_Booking").bind("click", function(e) {

    // custom handling here
    e.preventDefault();
    e.stopPropagation();
}​

Give it a try.

Upvotes: 1

Snuffleupagus
Snuffleupagus

Reputation: 6715

You can wrap it in a closure and use a dirty flag variable. (closure so the flag isn't global)

(function(){
    var dirtyFlag = false;
    $('#clicker').click(function(){
        if (dirtyFlag) return;
        dirtyFlag = true;
        setTimeout(function(){
            console.log('clean and proceeding');
            dirtyFlag = false;
        }, 500);
    });
})();​

Fiddle here. Since disabling the button isn't an option this is IMO the cleanest and simplest solution.

Upvotes: 2

Nick.T
Nick.T

Reputation: 577

If you want the queuing method, try something like this : (just a mockup)

$('<div>').clearQueue('buttonQueue');

$("#booking_Form #submit_Booking").bind("click", function(event) {
    $('<div>').clearQueue('buttonQueue');
    $('<div>').queue('buttonQueue', myFunctionHere());
});

putting this in the DocumentReady function should be fine.

Upvotes: 1

Related Questions