Problems with resubmission of form in the POST method

Asked

Viewed 67 times

2

On my system I have a form that adds products to a sale, using PHP and Mysql. It works beauty. When I add the product I go to another page that inserts the data and then back to the sales page.

The problem is that my online server sometimes takes a long time to respond to the request when I add the product and the page keeps loading. System users click several times on the products without waiting for the answer.

Result: On sale you are adding multiple products at once, because users submit multiple requests at once. The problems I have with this is that it cuts into my stock and brings serious problems to the company. I need my system to count a single click, even if the user tries to click several times on the product.

Does anyone know any solution for not having this POST resend in PHP or even in Javascript?

An example of the code:

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

Page that inserts the product:

... recebo os campos do formulário
... insiro o produto
header("Location:insere-produto.php");
die();
php javascript html mysql

  • When your question is resolved, you don’t need to edit it by displaying the answer. Just click the accept icon in the answer that solved your problem. In case you marked the answer of another person and not mine. rs

2 answers

3


You can include a js that disables the button to avoid multiple clicks.

<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);
}

If you are using jQuery the code may be as follows:

<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...');
   });
});

  • Certinho Vinicius. This piece of jquery ai has solved. Thank you very much

1

You can disable the button and change its text with "Sending..." so that the user not only can click again view that the form is being sent:

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>

Browser other questions tagged php javascript html mysql

You are not signed in. Login or sign up in order to post.