Jquery activar desactivar boton submit de formulario

Pongamos que tenemos un formulario con n campos y su correspondiente botón submit para enviarlo. Para hacer el formulario mas usable e intuitivo siempre está bien desactivar el botón submit de enviar, siempre y cuando el formulario no este completado. Importante también mostrando mensajes de ayuda, o tooltips que es fundamental.

Vamos a poner que tenemos un formulario con una caja de texto y un botón submit. Lo que haremos será desactivar o deshabilitar el botón submit hasta que no haya algo escrito en la caja de texto.

<input type="text" name="textField" />
 <input type="submit" value="send" />

Para deshabilitar o desactivar el boton submit. Usaremos Jquery para llevar a cabo esta tarea y no usar Javascript a pelo.
Seleccionamos todos los inputs que sean del tipo submit y le agregamos el atributo disabled=”disabled”

$('input[type="submit"]').attr('disabled','disabled');

Para habilitar o activar el botón submit y poder enviar el formulario. Ejecutamos el siguiente código. Que lo que hace es eliminar el atributo disabled que hemos agregado anteriormente.

$('input[type="submit"]').removeAttr('disabled');

Ejemplo completo.
Cuando la caja de texto esta vacía el botón submit de desactiva. Cuando algo se escribe en la caja del formulario se muestra el boton submit activo. Si la caja de texto volviese a estar vacía se tendría que volver a desactivar el botón submit otra vez.

$(document).ready(function(){
     $('input[type="submit"]').attr('disabled','disabled');
     $('input[type="text"]').keypress(function(){
            if($(this).val() != ''){
               $('input[type="submit"]').removeAttr('disabled');
            }
     });
 });

Tags de búsquedas:

activar submit javascript,php validar un valor y bloquear un boton,ocultar boton submit jquery,jquery no funciona submit de boton,jquery deshabilitar boton,jquery activar enabled a caja,javascript para bloquear botones hasta q se envie el registro,deshabilitar un boton con jquery,deshabilitar boton jquery despues de click,activar y desactivar un submit

2 comentario/s

Comentar