i am clicking a button and calling a function... when i click button twice the

data is inserting twice

in mysql database how can i avoivd it in my case..?

This my dynamic html:

<button type="button"
    href="javascript:;"
     class="btn btn-primary"
       onclick="jobResponse('yes',<?php echo $myjobs['id_job'];?>)"> 
         Subimt </button>

This is my function with ajax call:

 <script type="text/javascript">
    function jobResponse(res,jobId){
        var frm_data = { res : res,
            jobId : jobId
        }
        $.ajax({
            //ajax resopons and requst
        });
    }
    </script>

How can i resolve this issue..?

i am clicking a button and calling a function... when i click button twice the

data is inserting twice

in mysql database how can i avoivd it in my case..?

This my dynamic html:

<button type="button"
    href="javascript:;"
     class="btn btn-primary"
       onclick="jobResponse('yes',<?php echo $myjobs['id_job'];?>)"> 
         Subimt </button>

This is my function with ajax call:

 <script type="text/javascript">
    function jobResponse(res,jobId){
        var frm_data = { res : res,
            jobId : jobId
        }
        $.ajax({
            //ajax resopons and requst
        });
    }
    </script>

How can i resolve this issue..?

• javascript
• jquery
• mysql
• ajax
• onclick

5 Answers 5

Pass the button reference and disable it and later when ajax is pleted enable it again if needed.

<button type="button" href="javascript:;" class="btn btn-primary" onclick="jobResponse(this, 'yes',<?php echo $myjobs['id_job'];?>)">    Subimt</button>
<!--                                                                   ----------------^^^^----


<script type="text/javascript">
  function jobResponse(ele, res, jobId) {
    var frm_data = {
      res: res,
      jobId: jobId
    };
    // disable the button
    $(ele).prop('disabled', true);
    $.ajax({
      //ajax resopons and requst
      plete: function() {
        // enable the button if you need to
        $(ele).prop('disabled', false);
      }
    });
  }
</script>

you can do like disable when first time user click on button like following

onclick="this.disabled='true';jobResponse('yes',<?php echo $myjobs['id_job'];?>)"> 

you can use a flag like this

<script type="text/javascript">

var isClicked = false;
    function jobResponse(res,jobId){
if(isClicked=== false){
       var frm_data = { res : res,
            jobId : jobId
        }
        $.ajax({
            //ajax resopons and requst
        });
       isClicked  = true;
}
    }
    </script>

You can follow a simple trick here. Define a Boolean type variable true initially. After clicking first time that will bee false. Just like this.

<script type="text/javascript">
var x=true;
function jobResponse(res,jobId){
    if(x){
        x=false;
        var frm_data = { res : res,
            jobId : jobId
        }         
        $.ajax({
            //ajax resopons and requst
        });
    }
}
</script>

Disabled the button after the function call and enabled after the ajax response

The dynamic html

<button type="button"
href="javascript:;"
 class="btn btn-primary"
 id="saveJob"
   onclick="jobResponse('yes',<?php echo $myjobs['id_job'];?>)"> 
     Subimt </button>

Ajax function

<script type="text/javascript">
   function jobResponse(res, jobId) {
   var frm_data = {
  res: res,
  jobId: jobId
};
// disable the button
$(#saveJob).prop('disabled', true);
$.ajax({
  //ajax resopons and requst
  plete: function() {
    // enable the button if you need to
    $(#saveJob).prop('disabled', false);
  }
});

}

I hope this will helps you.