jQuery Allow only one click before .ajax()

Question

I am trying to allow a button to be clicked only once and then some data be submitted via ajax. The problem I am facing is that a user can click 50x and the data is POST submitted each time ?

jQuery("#id").unbind('click');

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        location.reload(true);
    }
});

How can I ensure that if a user clicks #ID 100x - that the data is only submitted once ? And then #ID is re-enabled ?

you should validate that from server side too ! – Fortin Jul 17 '14 at 17:34 — Fortin, Jul 17 '14 at 17:34

score 10 · Answer 1 · answered Jun 12 '11 at 17:08

10

You could use the .one() function in jQuery.

jQuery("#id").one('click', function()
{
    jQuery.ajax({
        type: "POST",
        url: ajax_url,
        data: ajax_data,
        cache: false,
        success: function (html) {
            location.reload(true);
        }
    });
});

Bear in mind this will completely remove the click event, even if you have an error with your ajax, you still won't able to click it again.

answered Jun 12 '11 at 17:08

MacMac

34,294
55
151
222

thanks for the response :) ? so I can use unbind after this ? – Tom Jun 12 '11 at 17:12
1

No, you do not need to use the `unbind` function, it does it for you. As TheSuperTramp says, it's best to `bind` the click event if an error has occurred in the AJAX request. – MacMac Jun 12 '11 at 17:15
thanks for the response but this seems to prohibit the submission of the ajax on user click ? i.e. it does nothing once the div is clicked ? – Tom Jun 12 '11 at 17:36
One may want to also add a callback to make sure the async request is handled and the event waits for a response. – Pat Oct 09 '20 at 21:12

score 5 · Accepted Answer · answered Jun 12 '11 at 17:23

5

just disable the button

$("#id").attr("disabled", "disabled")

and then in the success function enable it

$("#id").removeAttr("disabled")

answered Jun 12 '11 at 17:23

Sruly

10,200
6
34
39

thanks @sruly - but i'm using a div for the button :) so can't use attr etc - but +1 – Tom Jun 12 '11 at 17:27
ok changed it to a button :) was a bit easier as although the .one() was also correct - it wasn't playing so nice :) – Tom Jun 12 '11 at 17:36

score 2 · Answer 3 · answered Jun 12 '11 at 17:11

2

Easiest way would be to use a flag which gets reset when the success is fired:

if(clicked == False){
    clicked = True;
    jQuery("#id").unbind('click');

    jQuery.ajax({
       type: "POST",
       url: ajax_url,
       data: ajax_data,
       cache: false,
       success: function (html) {
           location.reload(true);
           clicked = False;
       },
       error: function () {
            alert("Error happened");
           clicked = False;
       }
    });
}

answered Jun 12 '11 at 17:11

rzetterberg

10,146
4
44
54

This works for divs as well. If you are using a button, you may be able to use the one above. In my case, I was using a td. This worked for me! +1 – AVenger Apr 29 '14 at 13:38

score 0 · Answer 4 · edited May 23 '17 at 11:44

0

You can disable to control, or use one of the many modal libraries to show the spinning wheel

see this Jquery modal dialog question on SO

edited May 23 '17 at 11:44

Community

1
1

answered Jun 12 '11 at 17:12

Kinjal Dixit

7,777
2
59
68

score 0 · Answer 5 · answered Jun 12 '11 at 17:13

0

You could disable the button on click event and enable it back when ajax request is completed.

answered Jun 12 '11 at 17:13

Hasan Fahim

3,875
1
30
51

score 0 · Answer 6 · answered Jun 12 '11 at 17:13

In your click event you could disable the button and then re-enable the button in the success function of the ajax event.

Another option would be to set a parameter on the element that is being clicked to indicate the button was clicked and then check to see if it is set if it is don't send the ajax request if not then do send it. Once the ajax is done you can unset the parameter again to allow it to be run.

score 0 · Answer 7 · answered Jun 12 '11 at 17:14

0

try this:

$(document).ajaxStart({ function() {
 $('#submit_button').click(function(){
   return false;
 });
});

where: #submit_button is id of the element U want to disable

that code will disable clicking on the submit button

answered Jun 12 '11 at 17:14

WooDzu

4,771
6
31
61

jQuery Allow only one click before .ajax()

7 Answers7