Fix double-click buttons with JQuery

Question

Fix double-click buttons with JQuery

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

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

It happens that some users who access the site click the button several times to take some action, which is causing several INSERTS followed and incorrect before, for example, close the modal or redirect 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 on the onclick event and then turn it back on.

I tried this way but it did not work:

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

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

I looked at multiple ways to prevent double click, including link that focuses especially in this matter. However, the ways I have found so far will make me have to go to each button on the site (it should have about 200 buttons, the site is big) and go putting this disable function one by one.

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

html jquery

asked by anonymous 20.07.2017 / 16:49

2 answers

1

You can do with jquery as well.

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

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

But follow 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><buttonclass="btn btn-primary"><span>botao 1</span></button>
<button class="btn btn-primary"><span>Botao 2</span></button>

20.07.2017 / 17:36

How to get the return of the method ofInBackground in android? How to break line automatically in a text component?

score 2 · Accepted Answer

Try 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><inputtype="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" on the page, but only the button that the user clicks on at that moment will be disabled and after 3 seconds the button will be reactivated.