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

[aeb_asturias]

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.

[GeekGirl]

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 :)

[dAvidcA]

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:

$.ajax({
  ...
}).always(function() {
    alert( "Ejecución completa" );
});
 

Hice un ejemplo de como lo estás buscando:

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



Saludos.

[aeb_asturias]

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

Gracias de nuevo.