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
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:
-
var statSend = false;
-
function checkSubmit() {
-
if (!statSend) {
-
statSend = true;
-
return true;
-
} else {
-
alert("El formulario ya se esta enviando...");
-
return false;
-
}
-
}
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.
-
function checkSubmit() {
-
document.getElementById("btsubmit").value = "Enviando...";
-
document.getElementById("btsubmit").disabled = true;
-
return true;
-
}
Pueden ver el ejemplo funcionando en prevent2submitII.html.
Posts Relacionados
Comentarios Total 8 comentarios
Publicado: 22/05/2008 2:15 pm
Muy buen aporte, lo necesitaba… Copiando y pasteando… ;) Saludos…
Publicado: 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
Publicado: 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
Publicado: 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.
Publicado: 20/01/2009 11:15 am
Muy buen aporte me ayudo mucho, en cuanto a los dos métodos se aplican de acuerdo a las necesidades de programación. en mi caso fue muy util la segunda debido a que al realizar un click se habilita un gif animado de “procesando” y es cuando deshabilito el boton.
Publicado: 29/01/2009 10:31 pm
mmm… siendo una interfaz web, mas peligroso que doble submit, es que te hagan F5 (recargar) en la pagina a donde se envio el formulario tal vez ahi es donde mas interesa, para que no se duplique informacion, para eso seria bueno encontra algun buen metodo
Publicado: 14/03/2009 1:19 pm
CEVA, para eso puedes bloquear algunas teclas en tu aplicación web. Eso implica que implementes una capa de “identificación” de browser y ahí sí el bloqueo de teclas específicas.
Si alguien está interesado envíeme un email y con gusto se lo comparto.
Publicado: 11/06/2009 10:43 am
hombre muchas gracias, era lo ke necesitaba, buen post…