Javascript: Evitar doble Submit

  • 22/05/2008
  • 12:52 am
  • unijimpe

En algunas ocasiones cuando se hace el envío de datos mediante un formulario el servidor demora en responder y el usuario presiona el botón enviar nuevamente con lo cual se pueden generar registros duplicados o correos enviados varias veces. Para prevenir este problema veremos dos formas de desactivar el envío múltiple del formulario mediante Javascript.

Creando el Formulario
Supongamos que tenemos un formulario en el cual deseamos registrar el nombre y el email de un visitante, para ello creamos un formulario

HTML:
  1. <form method="post" onsubmit="return checkSubmit();">
  2.     Nombres:<br />
  3.     <input name="nombres" type="text" id="nombres" /><br />
  4.     Email:<br />
  5.     <input name="email" type="text" id="email" /><br />
  6.     <input type="submit" id="btsubmit" value="Registrar" />
  7. </form>

Nótese que hemos agregado en el evento onsubmit (el cual se ejecuta al enviar el formulario) el llamado a la función checkSubmit (el cual crearemos mas adelante), además de ello al botón de envío lo hemos llamado btsubmit.

Metodo I: Verificar el doble envío
Lo que haremos es guardar una variable que indique que ya se envío el formulario, en el siguiente llamado mostraremos un mensaje indicando que el formulario ya se esta enviando. Luego la función checkSubmit tendría la forma:

JavaScript:
  1. var statSend = false;
  2. function checkSubmit() {
  3.     if (!statSend) {
  4.         statSend = true;
  5.         return true;
  6.     } else {
  7.         alert("El formulario ya se esta enviando...");
  8.         return false;
  9.     }
  10. }

Pueden ver el ejemplo funcionando en prevent2submitI.html.

Metodo II: Deshabilitar el botón Enviar
En este caso, una vez presionado el botón enviar lo deshabilitamos y ademas le cambiamos el texto indicando que el envío del formulario. Para ello utilizamos el nombre del botón el cual hemos llamado btsubmit.

JavaScript:
  1. function checkSubmit() {
  2.     document.getElementById("btsubmit").value = "Enviando...";
  3.     document.getElementById("btsubmit").disabled = true;
  4.     return true;
  5. }

Pueden ver el ejemplo funcionando en prevent2submitII.html.

Posts Relacionados

Total de Comentarios: 4

Publicidad
Yeru
22/05/2008
2:15 pm

Muy buen aporte, lo necesitaba… Copiando y pasteando… ;) Saludos…

caos30
23/05/2008
5:49 am

Muy bien pensado. Sobretodo me ha gustado el primer método. Es más, yo lo recomendaría. Le veo una ventaja importante: permite que la función checkSubmit() sea llamada desde varios sitios. Quiero decir, que se podría llamarla cuando el visitante haga clic en cualquier botón de la página que lleve a un formulario, si es que en una misma página hubieran varios formularios. Sería como una forma de decir: “ahora que ya has hecho clic aquí, tendrás que esperar la respuesta del servidor”, puesto que tal como nosotros sabemos una vez enviada la petición es muy posible que aunque no se haya renderizado en la pantalla la respuesta del servidor, éste ya haya realizado cambios en la base de datos, y un “tirar atrás” a mitad del proceso en determinados casos es peliagudo, jejejeje… y que nadie piense mal, eh!! ;)

SERGI

caos30
23/05/2008
5:52 am

Perdón, ahora que releeo mi primer comentario quiero añadir -para que se me entienda mejor- que estoy pensando en el caso de estar programando una “aplicación web”, no tanto una navegación web sencilla.

Como ya sabréis los que programais aplicaciones web, las repeticiones de clic pueden ser muy “peligrosas”, y en este sentido el artículo me ha parecido muy interesante ;)

SERGI

SERGI

albert
23/05/2008
1:40 pm

hay otro mejor que en vez de que aparezca la ventanita diciendo que el mensaje se esta enviando, simplemente desactiva el boton, no pudiendo hacer mas click.

Enviar Comentario

(*)

(*)