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 

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 

• javascript
• php
• jquery
• ajax
• button

• $("#GdStartTest").click(function(e){e.stopPropagation();... rest of the code – Death-is-the-real-truth Commented Jan 9, 2017 at 7:26
• Possible duplicate of bind event only once – Death-is-the-real-truth Commented Jan 9, 2017 at 7:28
• Lol re: "making me sick" – Mulan Commented Jan 9, 2017 at 7:31

3 Answers 3

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

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

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

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

    $.ajax({
        url: "gdcontroller.php",
        method: "POST",
        .........
        plete : 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",

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

1. Disable the button.

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

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