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:

deshabilitar boton jquery,desactivar boton jquery,deshabilitar submit jquery,deshabilitar submit,bloquear caja de texto jquery,deshabilitar boton javascript si caja de texto esta vacia,jQuery,jquery activar boton,desactivar un botón jquery,funcion en javascript para desabilitar un select y activar un input text,jquery desactivar boton,jquery deshabilitar boton,activar los campos select con jquery,habilitar boton jquery,html buton anular submit

Contenido patrocinado

6 comentarios en Jquery activar desactivar boton submit de formulario

  1. Yesika
    / Responder

    hola

    Yo tengo un caso similar, tengo 5 texbox y 3 botones al momento de colocar info en alguno de los texbox los demás se desactivan pero también se activan los 3 botones , lo que requiero es que al momento de escribir algo en el texbox si se desactiven los demás texbox pero que uno de los 3 botones quede deshabilitado, como podría hacer esto?

  2. / Responder

    HOla, muy buen tutorial, pregunta: como podría cambiar el color del boton submit una vez que se activa el formulario? por ejemplo de gris (disabled) a verde (enabled).- gracias

  3. / Responder

    Hola, como podría cambiar el color del boton una vez que se activa?.- por ejemplo de gris (disabled ) a verde (enabled) .- Y muy buen tutorial. me re sirvio Gracias

  4. / Responder

    estoy haciendo un formulario igual que el que explicas pero necesito que se desbloquee al escoger un campo de un select que el ultimo objeto de mi formulario como hago? ayúdame por favor

  5. Paul
    / Responder

    si tengo varios campos tipo text, cómo hago para que sea obligatorio rellenarlos todos? Porque como esta hora el código, sólo si relleno el primero se habilita el botón enviar. Gracias.

  6. matt owens!!!
    / Responder

    Mira mi buen, no se que ande haciendo mal tengo un pagina que es menu principal, dentro de ella mediante frames se cargan todas las demas paginas…
    el caso es que estoy intentando enviar datos a mi bd y no logor hacerlo con query[ajax], y php he llegado a pensar que quizas por tener dentro de un y un mis datos no lo hace, ya que en otra pagina donde no tengo eso si me hace la insercion de datos, pero tengo mis inputs libres… sin imagenes ni nada, me echas una mano…
    // esto es el codigo del formulario de llenado

    $(function(){
    // Para Agregar Libro
    $(‘#agregarLibro’).click(function(){
    $(‘#content’).slideUp(‘slow’,function(){
    $(this).load(‘AccionLibros.php?varL=1’,”,function(){
    $(this).slideDown(‘slow’);
    });
    });
    return false;
    });

    $(‘#cargar’).live(‘click’,function(){
    var datoL=’varL=2&Autor=’+$(‘#autor’).val()+
    ‘&Editorial=’+$(‘#editorial’).val()+
    ‘&Edicion=’+$(‘#edicion’).val()+
    ‘&Matricula=’+$(‘#matricula’).val()+
    ‘&Titulo=’+$(‘#titulo’).val()+
    ‘&Cantidad=’+$(‘#cantidad’).val();

    $.get(‘AccionLibros.php’,datoL,function(){
    alert(‘guardado’);
    });
    });
    });

    // este es el php donde se cargan el formulario en el div y la insercion de los datos

    Tipo:

    [Elija Materia]
    DICCIONARIOS Y ENCICLOPEDIAS
    FILOSOFIA
    RELIGION
    CIENCIAS SOCIALES
    CIENCIAS EXACTAS
    CIENCIAS APLICADAS
    HISTORIA

    Titulo:

    Editorial:

    Edicion:

    Cantidad:

    Autor:

    Matricula:

    Guardar
    AgregarLibro($_GET);
    break;
    default:
    break;
    }
    ?>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Comparte este artículo! »

Sígueme en Facebook »

Suscríbete al newsletter »

Proporciona tu correo electrónico a continuación y recibe las últimas noticias! Funciona con Feedburner de Google

Archivo »

profile for Pedro Ventura on Stack Exchange, a network of free, community-driven Q&A sites
Leer entrada anterior
PHP meter una sentencia if dentro de un echo

Digamos que quieres hacer algo así: Esto claro está va a fallar porque no se puede meter sentencias de control...

Cerrar