2

Tengo este problema, al momento de cargar la página mi input está vacío pero no está bloqueado el botón. El botón solamente funciona cuando yo escribo en el input. Y mi problema es que no se código JavaScript ponerle, que al momento de cargar la página inmediatamente me verifique que el input esté vacío y bloquee el botón.

Aquí el código HTML:

<input type="number" name="quanti"  id="quanti"  class="form-control" 
    onInput="validarInput('<?php echo $row["idArticulo"]; ?>')"  
    onKeyPress="return soloNumeros(event)"
/>

<button type="submit" name="add_to_cart" id="<?php echo $row['idArticulo']; ?>" 
    class="btn btn-warning add_to_cart" >Agregar al carrito</button>

Aquí el código JavaScript:

<!-- acepta solo numeros, funciona bien-->
<script  type="text/javascript">
    function soloNumeros(e) {
        var key = window.Event ? e.which : e.keyCode;
        return ((key >= 48 && key <= 57) ||(key==8))
    }
</script>

<script type="text/javascript>
function validarInput(iden) {
    /*Funcion del botón, funciona bien, pero solo cuando yo escribo*/
        document.getElementById(iden).disabled = !document.getElementById("quanti").value.length;
    }
</script>

Ahora el problema es que como yo no se mucho de JavaScript no sé que código agregar para que al momento de cargar la página, bloquee el botón cuando el input esté vació. Por favor, ¿alguien tiene una idea de cómo agregar el script?

0

3 respuestas 3

3

Simplemente agrégale el atributo disabled (o disabled="disabled" si estas usando XHTML) al botón para que comienze desactivado.

<button type="submit" name="add_to_cart" disabled id="<?php echo $row['idArticulo']; ?>" 
class="btn btn-warning add_to_cart" >Agregar al carrito</button>

No necesitas verificar que el input este vacío ya que siempre comenzará vacío (según el código que has mostrado)

1

te recomiendo usar Jquery, asi es mas facil: va comentado para mejor explicacion

<!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <script src="js/jquery.js"></script>
</head>
<body>
<input type="number" name="quanti"  id="quanti"  class="form-control" >
<button type="submit" name="add_to_cart" 
    class="btn btn-warning add_to_cart" >Agregar al carrito</button>
</body>
</html>

<script type="text/javascript">
$(document).ready(function() {   //$(document).ready se ejecuta cuando carga la pagina
     $(':input[type="submit"]').prop('disabled', true);   //desactiva el input al cargar
     $('input[type="number"]').keyup(function() {   //cuando presionas tecla 
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });
</script>
1

Para que el botón aparezca desactivado puedes hacerlo desde el mismo html, poniendo el atributo disabled:

Este atributo booleano indica que el usuario no puede interactuar con el botón. Si no se especifica este atributo, el botón hereda su configuración del elemento que contiene, por ejemplo ; Si no hay ningún elemento que contiene con el conjunto de atributos deshabilitado, entonces el botón está habilitado.

Por ejemplo:

<button id="btnEnviar" disabled>Enviar</button>

Luego, por Javascript puedes escuchar el evento keyup para determinar si hay datos en el input y en consecuencia, activar o desactivar el botón.

Ejemplo:

var btnEnviar = document.getElementById('btnEnviar');
var inputTest = document.getElementById('inputTest');
var datos = inputTest.val;

inputTest.addEventListener("keyup",function(){

if(inputTest.value.length === 0){
    console.log('desactivado');
    btnEnviar.disabled = true;
  }

  else {  

    console.log('activado');
    btnEnviar.disabled = false;

    }
  });
<label for="enviar">Escriba sus datos</label><input id="inputTest" type="text" ><button id="btnEnviar" disabled>Enviar</button>

1

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.