CODEWITHSUNDEEP
javascriptphpjqueryajaxbutton
Mr world wide
Mr world wide

Reputation: 4834

How to Avoid, Ajax button click twice

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

Upvotes: 4

Views: 2305

Answers (3)

Pranav C Balan
Pranav C Balan

Reputation: 115242

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",

Upvotes: 8

Sabarish
Sabarish

Reputation: 126

  1. Disable the button.

  2. Use a Loader on ajax using beforeSend as another parameter.

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

Upvotes: 2

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26268

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();
});

Upvotes: 2

Related Questions