Fix Double Click Buttons with Jquery

Question

I am performing maintenance on a site with multiple forms with buttons of type SUBMIT and also normal buttons that call an onclick event that in FORMS is used to perform the validation of the data and in other situations is used to make some action that moves the database.

It is happening that some users who access the site click several times on the button to perform some action, which is causing several INSERTS followed and incorrect before, for example, closing the modal or redirecting to the other page at the end of the execution of the script.

I want to create a function in my scripts.js so that when any button is clicked, it gets disabled for a few seconds and run what was set directly in the onclick event and then activate it again.

I tried it this way but it didn’t work:

$('button').click(function() {
this.prop('disabled',true);

setTimeout(function(){
this.prop('disabled', false);
}, 5000);
});

I searched on several sites ways to prevent double click, including http://www.the-art-of-web.com/javascript/doublesubmit/ that focuses primarily on this subject. However, the ways I’ve found so far will make me have to go on every button on the site (it must have 200 buttons, it’s great the site) and go putting this disable function one by one.

What I should change to the code above to work as I asked?

Answer 1

Try it like this:

//Desativar o botão ao clicar
$(":button").click(function() {
  $(this).prop("disabled",true);
});
//Reativar o botão após 3 segundos
$(":button").click(function() {
   var btn = this;
    setTimeout(function() {
      btn.disabled =  false; 
    }, 3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="button" id="botão" value="Enviar">

<input type="button" id="botão2" value="Enviar">

The above code will be applied to all input type="button" existing on the page, but will only be disabled the button on which the user click at that time and, after 3 seconds, the button will be reactivated.

Answer 2

You can do with jquery too.

Only that in the part of setTimeout you can replace for your processing that would

$.ajax({
  url  : 'seruarquivo.php',
  dataType : 'json',
  type : 'post',
  beforeSend : funcaoqueDesabilita,
  data : {
     parametro : dado
 },
  success : function(data){
      //habilita  novamente
   }  
});

But it follows suggestion

$('button').on('click', function(){
      var botao = $(this);
      botao.prop('disabled', true);
      var texto = botao.find('span').text();
      botao.find('span').text('Aguarde...');
      
      botao.removeClass('btn-primary');
      botao.addClass('btn-danger');
      setTimeout(function(){
         botao.prop('disabled',false);
         botao.removeClass('btn-danger');
         botao.addClass('btn-primary');
         botao.find('span').text(texto);
      },3000
      );
      
      
      
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>


<button class="btn btn-primary"><span>botao 1</span></button>
<button class="btn btn-primary"><span>Botao 2</span></button>