1

Soy nuevo en esto de HTML y JavaScript. El problema es que cuando yo deje el campo input vacio, el boton debe bloquearse y no me deje hacer más acciones. Este es el codigo:

El codigo de la caja de texto es el siguiente:

<input type="number" name="quanti"  id="quanti"  class="form-control" value="1" />

El codigo del boton es el siguiente:

<button type="submit" name="add_to_cart" id="btn_Validar" 
 class="btn btn-warning add_to_cart">Añadir al carrito
</button>

Pero en javascript no sé que codigo se debe poner. Me pueden orientar porfavor.

1

3 respuestas 3

1

Esta es la forma más fácil, validando en el evento onInput la longitud del valor del input y desactivándolo si no tiene al menos un caracter.

function validarInput() {
  document.getElementById("btn_Validar").disabled = !document.getElementById("quanti").value.length;
}
<input type="number" name="quanti"  id="quanti"  class="form-control" value="1" onInput="validarInput()" />

<button type="submit" name="add_to_cart" id="btn_Validar" 
 class="btn btn-warning add_to_cart">Añadir al carrito
</button>

8
  • Tu evento no se disparará si se pega contenido usando el mouse......
    – lromeraj
    el 17 ago. 2017 a las 18:32
  • me sirvió, funciona, gracias
    – Hermann BD
    el 17 ago. 2017 a las 18:32
  • @Javi, Arreglado el 17 ago. 2017 a las 18:33
  • @CarlosMuñoz 😋
    – lromeraj
    el 17 ago. 2017 a las 18:34
  • 1
    Gracias @CarlosMuñoz
    – Hermann BD
    el 17 ago. 2017 a las 18:40
1

Puedes añadir un evento al <input> que se dispare cada vez que se escriba en él, te dejo un ejemplo:

HTML:

<input id="valor" type="text">
<button id="submit">Enviar</button>

JavaScript:

function el(el) {
    return document.getElementById(el);
}

el("valor").addEventListener("input",function() {
    if (!this.value.length) { //Si la longitud de la cadena de caracteres es 0 => falsa
        el("submit").disabled = true; //Deshabilitamos el botón
    } else { //Si no...
        el("submit").disabled = false; //Lo habilitamos
    }
});

Ó, simplificándolo un poquito más...

function el(el) {
    return document.getElementById(el);
}

el("valor").addEventListener("input",function() {
    el("submit").disabled = Boolean(this.value.length<=0);
});

Espero que sirva de ayuda

2
  • Probaré su código
    – Hermann BD
    el 17 ago. 2017 a las 18:27
  • @Hermann recuerda que te puse un ejemplo con elementos HTML distintos a los tuyos, si lo pruebas con tus elementos acuérdate de cambiar las "id" de sus elementos correspondientes.
    – lromeraj
    el 17 ago. 2017 a las 18:31
-1

Lo he hecho así y funciona:

$('#quanti').change(function(){ 
    //alert("el input cambio");
    if($(this).val()==0){ //si el input es cero
        $('#btn_Validar').attr('disabled', 'disabled');
    }
    else{ // si tiene un valor diferente a cero
        $('#btn_Validar').removeAttr("disabled");
        }
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.