Foros del Web » Programando para Internet » Jquery »

Como evitar que un usuario haga click repetidas veces en un botón

Estas en el tema de Como evitar que un usuario haga click repetidas veces en un botón en el foro de Jquery en Foros del Web. Hola a todos/as, Tengo la siguiente duda: Tengo una página Web con un formulario. Cuando el usuario pincha en el botón de "Enviar" mediante Jquery ...
  #1 (permalink)  
Antiguo 23/10/2014, 02:29
 
Fecha de Ingreso: marzo-2004
Mensajes: 550
Antigüedad: 20 años
Puntos: 7
Como evitar que un usuario haga click repetidas veces en un botón

Hola a todos/as,

Tengo la siguiente duda:

Tengo una página Web con un formulario. Cuando el usuario pincha en el botón de "Enviar" mediante Jquery hago una petición Ajax a un script PHP que se encarga de insertar la información del formulario en la BBDD y al usuario se le redirige a otra página. En el paso de una página a otra saco un mensaje típico de "Procesando petición......".

A veces está ocurriendo que se insertan los datos del formulario varias veces como si el usuario hubiera pinchado varias veces en el botón antes de que se le redirija a la otra página.

El paso de una página a la otra es bastante rápido por lo que que no da casi tiempo a pulsar el botón de "Enviar" varias veces. Pero puede ocurrir que si alguien tiene una conexión lenta o demás tarde algo en procesarse la petición y el usuario sea tan impaciente que vuelva a hacer click en el botón.

La solución sería deshabilitar el botón de "Enviar" una vez el usuario haya hecho click en él?

O para estas cosas se suele aplicar otro tipo de solución??


Saludos.
  #2 (permalink)  
Antiguo 23/10/2014, 06:19
Avatar de GeekGirl  
Fecha de Ingreso: julio-2014
Mensajes: 423
Antigüedad: 9 años, 8 meses
Puntos: 44
Respuesta: Como evitar que un usuario haga click repetidas veces en un botón

Yo haría algo como lo que decís vos. Deshabilitar el botón enviar, abrir un modal con background negro que no permita clickear a los elementos por detrás, poner un spinner en lugar del botón, etc.

Cualquiera de esas es una buena idea.

Saludos :)
  #3 (permalink)  
Antiguo 23/10/2014, 06:44
Avatar de dAvidcA  
Fecha de Ingreso: septiembre-2009
Ubicación: /home/dev/
Mensajes: 73
Antigüedad: 14 años, 6 meses
Puntos: 7
Respuesta: Como evitar que un usuario haga click repetidas veces en un botón

Hola aeb_asturias, ya que estás usando $.ajax() puedes usar los métodos propios .done() .fail() .always() para saber cuando responde la consulta y así desactivar o no el botón:

Aquí la documentación (http://api.jquery.com/jquery.ajax/), disponible a partir de jQuery 1.5.

Código Javascript:
Ver original
  1. $.ajax({
  2.   ...
  3. }).always(function() {
  4.     alert( "Ejecución completa" );
  5. });


Hice un ejemplo de como lo estás buscando:

http://jsfiddle.net/dAvidcA/jpp7cLpd/



Saludos.
  #4 (permalink)  
Antiguo 28/10/2014, 03:03
 
Fecha de Ingreso: marzo-2004
Mensajes: 550
Antigüedad: 20 años
Puntos: 7
Respuesta: Como evitar que un usuario haga click repetidas veces en un botón

Muchas gracias por vuestras respuestas. Ahora me queda mucho mas claro como llevarlo a cabo.

Gracias de nuevo.

Etiquetas: usuario, veces
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:14.