0

Estou realizando a manutenção em um site com vários formulários com botões do tipo SUBMIT e também botões normais que chamam um evento onclick que em FORMS é utilizado para realizar a validação dos dados e em outras situações é usado para fazer alguma ação que mexa no banco de dados.

Está acontecendo que alguns usuários que acessam o site clicam várias vezes no botão para realizar alguma ação, o que está ocasionando vários INSERTS seguidos e incorretos antes de, por exemplo, fechar o modal ou redirecionar para a outra página ao término da execução do script.

Eu quero criar uma função em meu scripts.js para que quando qualquer botão for clicado, ele ficar desabilitado por alguns segundos e executar o que foi definido diretamente no evento onclick e em seguida ativá-lo novamente.

Eu tentei desta seguinte maneira mas não deu certo:

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

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

Pesquisei em vários sites maneiras de se prevenir o duplo clique, inclusive http://www.the-art-of-web.com/javascript/doublesubmit/ que foca principalmente neste assunto. Entretanto, as maneiras que encontrei até agora me farão ter que ir em cada botão no site (deve ter uns 200 botões, é grande o site) e ir colocando essa função de desabilitar um por um.

O que eu deveria mudar para o código acima funcionar como pedi?

2 Respostas 2

1

Tente assim:

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

O código acima será aplicado a todos os input type="button" existentes na página, porém só será desativado o botão em que o usuário clicar naquele momento e, após 3 segundos, o botão será reativado.

1
  • 1
    Funcionou perfeitamente como deveria funcionar. Obrigado :D Commented 20/07/2017 às 18:23
1

Você pode fazer com jquery também.

Só que na parte do setTimeout você pode substituir para o seu processamento que ficaria

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

Mas segue sugestão

$('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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .