Desativando formulários com JavaScript no envio para impedir o envio duplo

Question

Eu gostaria de desativar um formulário depois de ser enviado para evitar envios duplos. Caso de uso bastante padrão, eu pensaria, mas todos os exemplos que posso descobrir lá são falhos.

Tudo o que posso encontrar é baseado em desativar o botão Enviar, mas isso não impede que o formulário seja re-substituído se o usuário atingir a tecla Enter no formulário, o que é uma abordagem bastante comum.

Estou pensando em modificar um dos scripts existentes por aí para explicar isso, mas antes de reinventar a roda, alguém conhece um script que já lida com isso corretamente que eles podem compartilhar? Estou realmente surpreso que ainda não haja nada por aí.

Answer 1

Você pode criar uma variável booleana (ou um objeto com uma variável de membro booleano) e enviar apenas o formulário quando a variável for falsa. Algo como:

function init() {
    var submit = false;
    var f = document.getElementById("FormID");
    f.onsubmit = function() {
        if(submit) {
            return false;
        } else {
            submit = true;
            return true;
        }
    }
}

Claro, você teria que ligar init Após a carga da página, no sabor que você escolher fazer isso (window.onload = ..., window.addEventListener(...), window.attachEvent(...), etc.).

Answer 2

http://jsfiddle.net/c2n4v/

var sent = false;
$('#form').submit(function(e) {
    if (!sent) {
        sent = true;
        // do whatever
    }
    else e.preventDefault();
});

Answer 3

Eu tentei muitas soluções, mas nenhuma delas funcionou para mim. Eu usei este e está funcionando muito bem:

jQuery

<script>
$(document).ready(function(){
  $('#buttonSubmit').click(function() {
    if ($('#frm-confirm').attr('submitted')){
        event.preventDefault();
    } else {
        $('#frm-confirm').attr('submitted',true);
    }
  });
});
</script>

Html/php

<form id="frm-confirm" action="" method="post">
    <input id="amount" name="amount" value="<?php echo round($_POST['amount'],2); ?>" type="hidden" />
    <input id="order_id" name="order_id" value="<?php echo htmlspecialchars($_POST['order_id']);?>" type="hidden" />
    <input type="submit" id="buttonSubmit" name="confirm" value="Confirm" />
</form>