Evitar doble Post en Formularios – Solo un Click!!

El problema siempre lo tienen los formularios :), cuando te das cuenta que se guarda dos veces la información en tu base de datos o se envia dos veces un correo, normalmente esto se da por que el ususario al darle click a tu formulario y si la web no responde rapido el usuario se desespera, vuelve a dar click por lo tanto ocasiona que se genere un doble envio de post, es facil evitar esto, solo tenemos que poner un pequeño codigo javascript y agregarle un onSubmit=”return checkSubmit();” a tu formulario.

Paso uno:

Pega este codigo a tu pagina: ya sea antes del formulario o en el HEAD

1
2
3
4
5
6
7

<script language="JavaScript">
function checkSubmit() {
    document.getElementById("btsubmit").value = "Enviando...";
    document.getElementById("btsubmit").disabled = true;
    return true;
} 
</script>

Paso dos:

En en tu formulario el codigo quedaria de la siguiente manera:

1
2
3
4
5
6

<form name="EnvioMsn" onSubmit="return checkSubmit();" target="_self" method="post" action="mini_chat_.php" class="text_form">
 
<textarea name="mensaje" cols="17" rows="2" wrap="physical" class="form_creatto"></textarea>
 
<input type="submit" name="btsubmit" id="btsubmit" value="Enviar Msj" >
</form>

Recuerda que el submit debe de tener como nombre btsubmit.

Lo que sucede es que al dar click al botton llama a la funcion onSubmit=”return checkSubmit(); de javascript y desabilita el botton y despues ejecuta el action.

Saludos