Assine:
RSS do Blog...

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

Related posts:

  1. Usuários impacientes: Submit apenas uma vez!
  2. Howto: Querys mais simples em PHP.
  3. Preencher Formulários PDF
  4. KLS Backup Professional
  5. Design Formulários Web

4 Responses to “Bloquear duplo submit”

  1. Marcel says:

    Legal isso td eu já fiz…
    O grande probrema é quando o tal usuário impaciente aperta F5 ao enviar o formulário para a act…..

  2. Johnny says:

    Olá. Valeu pela dica, resolveu meu problema. Utilizei o Método I, pois comigo o Método II não funcionou. Bom referente ao problema do reflesh (F5) da uma olhada no link http://www.bufaloinfo.com.br/artigos/artigo150205.asp

  3. Vinicius says:

    Eu estou com um problemão pois a aplicação cresceu de uma forma que fica muito complicado codificar todos os jsp´s e cada um com um processo de submit diferente (cada página tem uma função para validar os campos).
    Há alguma alternativa que não seja por javascript? Talvez o ideal seja alguma parametrização no servidor para bloquear uma segunda requisição para uma mesma sessão de navegação.

  4. Weyler says:

    Vinicius, uma configuração dessa no server eu acho dificil, pois em aplicações .net por exemplo, uma mesma página faz várias requisições em uma mesma sessão.
    Mesmo em outras aplicações, onde é utilizado ajax, isto acontece.

Leave a Reply