Cuando desarrollamos aplicaciones web en las que se muestra uno o varios formularios, en ocasiones nos encontramos con que al enviar éstos, el tiempo de proceso o consulta a la Base de Datos es mayor de lo deseable. Cómo todavía no conozco un usuario paciente, lo más probable es que mientras espera haya pulsado el botón enviar el formulario varias veces más, saturando el servidor con más peticiones y haciendo que el tiempo de proceso sea aún mayor.
Lo primero que se nos ocurre es deshabilitar el botón Submit para que el usuario no vuelva a pulsar y de esa manera evitamos recibir en el servidor varias peticiones idénticas. Esta solución funciona en la mayoría de los casos pero puede darse el caso en el que tengamos varios botones de tipo Submit dentro del mismo formulario (buscar, imprimir, ordenar, completar desplegable), y nos interese consultar en el servidor cuál de ellos ha pulsado mediante una sentencia similar a:
if (request.getParameter("nombre_del_input_submit_pulsado") != null) { ... }En el caso de que hayamos deshabilitado el botón no es posible recuperar si ha pulsado dicho botón puesto que los elementos deshabilitados de un formulario no se envían en la petición.
Existe un plugin en jQuery llamado Lock Submit que deshabilita el botón submit después de su pulsación manteniendo el par nombre / valor pasado en el formulario. Como dice en el título de la página del plugin:
Stop Double Clicks on form submits… without losing the submits name/value
Para usarlo necesitas tener jQuery, del que ya os he hablado en más de una ocasión y seguir estos pasos:
- Descarga el plugin
- Incluye tanto jQuery como el plugin en tu página
- Incluye el siguiente código adaptándolo al selector de tu botón:
<script type="text/javascript"> jQuery(document).ready(function() { jQuery('id_boton_submit').lockSubmit({ submitText: "Please wait" }); }); </script>Internamente no deshabilita el botón, realmente el botón original se encuentra oculto y el que se muestra en la página deshabilitado es una copia del primero. La propiedad submitText permite modificar y personalizar el texto que se muestra dentro del botón. También tiene propiedades para modificar el estilo css.