How to Avoid, Ajax button click twice

Question

I am trying to insert data into the database using ajax call

my problem is when I click the button twice the data is storing twice

and it is making me sick. How can I avoid it?

<from><button id ="GdStartTest"> </button></form>
$("#GdStartTest").click(function(){
$.ajax({
    url: "gdcontroller.php",
    method: "POST",

And this controller:

$studentQuery = $conn->query("INSERT INTO r_job_scores

`$("#GdStartTest").click(function(e){e.stopPropagation();... rest of the code` — Alive to die - Anant, Jan 09 '17 at 07:26
Possible duplicate of [bind event only once](http://stackoverflow.com/questions/8408826/bind-event-only-once) — Alive to die - Anant, Jan 09 '17 at 07:28

Pranav C Balan · Accepted Answer · 2017-01-09T07:40:51.937

8

Disable the button immediately after clicking it and enable it within the ajax complete callback.

$("#GdStartTest").click(function(){

    // cache the button reference
    var $this = $(this);

    // disable the button
    $this.prop('disabled', true);

    $.ajax({
        url: "gdcontroller.php",
        method: "POST",
        .........
        complete : function(){
          // enable the button
          $this.prop('disabled', false);
       },
 ......

Or use one() method to execute the event handler only once.

$("#GdStartTest").one('click', function(){
    $.ajax({
        url: "gdcontroller.php",

edited Jan 09 '17 at 07:40

answered Jan 09 '17 at 07:25

Pranav C Balan

113,687
23
165
188

2

I would rather put it in the "complete" callback so it gets executed no matter how the ajax call ended. – Mike Jan 09 '17 at 07:31
@Mike : yes, that's a perfect way... I will update the answer... Thanks m:) – Pranav C Balan Jan 09 '17 at 07:33
I don't get why - but the top method "disable" didn't work for me - I could always get 2-3 clicks to work. The "one()" method worked 100% for me. – Scott Aug 22 '22 at 19:22

score 2 · Answer 2 · answered Jan 09 '17 at 07:31

2

There are so many options to achieve this like, disable the button, put the event listener to off like:

$("#GdStartTest").click(function(){
    $(this).prop('disabled', true);
});

$("#GdStartTest").click(function(){
    $("#GdStartTest").off();
});

answered Jan 09 '17 at 07:31

Mayank Pandeyz

25,704
4
40
59

score 2 · Answer 3 · answered Jan 09 '17 at 07:32

2

Disable the button.

Use a Loader on ajax using beforeSend as another parameter.

   $.ajax({
           beforeSend: function(){
               $(".loader").show();
           }
   });

answered Jan 09 '17 at 07:32

Sabarish

126
1
10

How to Avoid, Ajax button click twice

3 Answers3