Bloquear duplo submit

Já falamos sobre este assunto aqui, porém, estamos reeditando o tópico para acrescentar uma outra lógica, para o mesmo problema, ou seja, evitar que o usuário dê um duplo submit em nossos formulários. Isso é muito comum acontecer, principalmente quando você tem uma baixa largura de banda, o usuário clica em enviar, e por impaciência acaba clicando várias vezes, resultando em vários registros inseridos. Ok, vejamos como proceder de duas formas.

Criando o Formulário
Suponhamos que temos um formulário no qual registramos o nome e email de um visitante:

<form method=“post”onsubmit=“return checkSubmit();”>
Nome:<br />
<input name=“nome” type=“text”id=“nome” /><br />
Email: <br />
<input name=“email” type=“text”id=“email” /><br />
<input type=“submit” id=“btsubmit”value=“Registrar” />
</form>

Note que temos um evento onsubmit (o qual se executa ao enviar o formulário) que chama a função checkSubmit (a qual iremos criar mais adiante).

Metodo I: Verificar o envio
O que faremos é armazenar em uma variável a indicação que o formulário foi enviado, e então mostraremos a mensagem indicando que o formulário esta sendo preocessado. Assim, nossa função checkSubmit teria esta forma:

var statSend = false;
function checkSubmit() {
if (!statSend) {
statSend = true;
return true;
} else {
alert(“O formulário esta sendo enviado…”);
return false; }
}

Metodo II: Desabilitar o botão enviar.
Neste caso, uma vez pressionado o botão enviar, realizamos a sua desabilitação e trocamos o texto “Enviar” para “Enviando dados…”

function checkSubmit() {
document.getElementById(“btsubmit”).value = “Enviando dados…”;
document.getElementById(“btsubmit”).disabled = true;
return true;
}