2

No meu sistema tenho um formulário que adiciona produtos numa venda, utilizando PHP e MySQL. Funciona beleza. Quando eu adiciono o produto eu vou para outra página que insere os dados e depois volto para a página da venda.

O problema é que meu servidor online as vezes demora a responder a requisição quando adiciono o produto e a página fica carregando. Os usuários do sistema clicam várias vezes no produtos sem aguardar a resposta.

Resultado: Na venda está adicionando vários produtos de uma vez só, porque os usuários enviam várias requisições de uma vez. Os problemas que tenho com isso é que abate no meu estoque e trás graves problemas pra empresa. Preciso que meu sistema contabilize um único clique, mesmo que o usuário tente clicar várias vezes no produto.

Alguém conhece alguma solução para não ter esse reenvio do POST no PHP ou até mesmo em JavaScript?

Um exemplo do código:

<form action="insere-produto.php" method="post">
... campos do formulário
<button type="submit" class="btn btn-primary btn-block"><b>SALVAR</b></button>
</form>

Página que insere o produto:

... recebo os campos do formulário
... insiro o produto
header("Location:insere-produto.php");
die();
1
  • Quando sua pergunta for sanada, você não precisa editá-la exibindo a resposta. Basta clicar no ícone de aceitar na resposta que resolveu seu problema. No caso você marcou a resposta de outra pessoa e não a minha. rs 7/06/2019 às 18:18

2 Respostas 2

3

Você pode incluir um js que desabilita o botão para evitar multiplos cliques.

<form action="insere-produto.php" method="post" id="form-insere-produto" onsubmit="bloquearBotao('#btnSubmit')">
... campos do formulário
<button type="submit" id="btnSubmit" class="btn btn-primary btn-block"><b>SALVAR</b></button>
</form>
function bloquearBotao(seletor) {
     document.querySelector(seletor).setAttribute('disabled', true);
}

Se estiver usando jQuery o código poderá ser o seguinte:

<form action="insere-produto.php" method="post" class="submit-once">
... campos do formulário
<button type="submit" class="btn btn-primary btn-block"><b>SALVAR</b></button>
</form>
jQuery(document).ready(function ($) {
   $('.submit-once').on('submit', function (e) {
       $(this).find('[type="submit"]').attr('disabled', true).text('Enviando...');
   });
});
1
  • Certinho Vinicius. Esse pedacinho do jquery ai já resolveu. Muito obrigado
    – Bruno
    7/06/2019 às 17:35
1

Você pode desabilitar o botão e alterar o texto dele com "Enviando..." para que o usuário além de não conseguir clicar novamente visualizar que o formulário está sendo enviado:

document.addEventListener("DOMContentLoaded", function(){
   
   document.forms[0].onsubmit = function(){
      
      var botao = this.querySelector("[type=submit]");
      botao.disabled = true;
      botao.innerHTML = "<b>Enviando...</b>";
      
   }
   
});
<form action="insere-produto.php" method="post">
   <button type="submit" class="btn btn-primary btn-block"><b>SALVAR</b></button>
</form>

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 .