1

Galera estou com um problema de envio duplicado de formulário.

Ele ocorre da seguinte maneira. Tenho um formulário html, quando o usuário da 2 cliques rápidos ou clica rápido no enter ele envia o formulário 2 vezes.

Eu tentei resolver o problema da seguinte forma.

Fiz o form assim:

<form name='form'  onsubmit='envia_tranca();'>

E coloquei esta javascript no começo da página:

<script>
        function envia_tranca() {
            document.forms['form'].submit();
            document.forms['form'].elements['envia'].disabled = true;
        }
</script>

Bom isso funciona no chrome e safari, porem no IE o bug continua, alguém pode me ajudar a resolver o problema?

2 Respostas 2

3

Método 1: "unobtrusive"

Use um código unobtrusive para desativar o envio do formulário após ele já ter sido enviado. Aqui está um exemplo usando jQuery.

$("form").submit(function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

Método 2: validação obsubmit()

Também existem outras formas de realizar essa validação, por exemplo:

<form onsubmit="return validacao()">
  Input teste: <input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var foiEnviado = false;    
    function validacao(){
      if(!foiEnviado) {
        foiEnviado = true;
        return ;
      }
      return false;
    }    
</script>

Método 3: plugin jQuery

Usando um plugin chamado Safeform, o segredo é usar o método data() para validar caso o formulário fora enviado ou não. Assim, não é preciso ficar validando botões, no que o Internet Explorer manda muito mal.

jQuery.fn.preventDoubleSubmission = function() {
  $(this).on('submit',function(e){
    var $form = $(this);

    if ($form.data('submitted') === true) {
      e.preventDefault();
    } else {
      $form.data('submitted', true);
    }
  });
  return this;
};

Use mais ou menos assim:

$('form').preventDoubleSubmission();

Leia mais sobre o jQuery Safeform

1
  • bom consegui fazer o Método 2 funcionar, porém queria saber como chamar o Método 1 no form Commented 19/02/2016 às 12:49
0

Já vi algo semelhante usando JQuery:

$("form").submit(function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

Existe também um plugin chamado jquery-safeform que resolve exatamente esse problema.

1
  • e como eu chamo ele em um form? Commented 19/02/2016 às 12:48

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 .