Submit only once on double click

Question

Possible Duplicate:
Need to cancel click/mouseup events when double-click event detected
Preventing double-click of Submit button

I have following function

$("#btnSubmit").click(function(){
                $("#btnSubmit").attr("disabled", "disabled");
          ....make ajax request
              $("#btnSubmit").removeAttr("disabled");

}

Problem is that I want to handle 1st click of a double click . Or a single click . Because when user double clicks it does run the function twice . If I use .one() it will handle only single clicks . But I also want to handle double clicks but only handle it once . Whats solution ?

Handling both single- and double-clicks in web applications is almost impossible and, for usability reasons, a terrible idea. — Pointy, Jun 13 '12 at 15:54
Also you should use ".prop()" to set/unset the "disabled" property: `.prop("disabled", true)` or `.prop("disabled", false)`. — Pointy, Jun 13 '12 at 15:55
Or maybe better: [Preventing double-click of Submit button](http://stackoverflow.com/questions/5944254/preventing-double-click-of-submit-button) -- please use the search. — Felix Kling, Jun 13 '12 at 15:58
Your `disabled` solution should work, as long as you enable it *inside the AJAX callback*. Can't tell what you're actually doing. — , Jun 13 '12 at 16:01
It's tempting to down vote all these "flag" solutions. What OP is already doing is superior, but is being done incorrectly. — , Jun 13 '12 at 16:07

thecodeparadox · Accepted Answer · 2012-06-13T16:03:45.030

2

Use

dblclick()

instead of click()

Read more about .dblclick()

Your code should look like

$("#btnSubmit").dblclick(function(){
   $("#btnSubmit").attr("disabled", "disabled");
   $("#btnSubmit").removeAttr("disabled");
});

You can use a flag

var alreadyClicked = false;
$("#btnSubmit").click(function(){
   if(alreadyClicked) {
      alreadyClicked = false;
      return false;
   } else {
     alreadyClicked = true;
     $("#btnSubmit").attr("disabled", "disabled");
     $("#btnSubmit").removeAttr("disabled");
   }
});

edited Jun 13 '12 at 16:03

answered Jun 13 '12 at 15:54

thecodeparadox

86,271
21
138
164

Pure JS docs: https://developer.mozilla.org/en/DOM/element.ondblclick – StuperUser Jun 13 '12 at 15:56
3

This won't handle single clicks. – Jun 13 '12 at 16:00
2nd code block wont differentiate between a double click vs subsequent single clicks . So once a button is clicked user wont be able to submit it with change of data . – Pit Digger Jun 13 '12 at 17:54

score 1 · Answer 2 · answered Jun 13 '12 at 15:55

Set a sentinel variable to prevents further clicks from being acted upon until the ajax request completes:

var clicked = false;
$("#btnSubmit").click(function(){
    if (clicked) {
        return;
    } else {
        clicked = true;
    }
    $.ajax({
      success: function() {
          clicked = false;
    });
});

score 0 · Answer 3 · answered Jun 13 '12 at 15:56

My solution would stop the double click my checking for a variable when the button is pressed.

What happens is that the click variable works as a check to see if the function is currently running.

var click = false;
$("#btnSubmit").click(function(){

  if (click == false) {
    click = true;

    $("#btnSubmit").attr("disabled", "disabled");

    //make ajax request

    $("#btnSubmit").removeAttr("disabled");

    click = false;
  }
}

Submit only once on double click

3 Answers3