3

Como puedo deshabilitar un botón con PHP, y que este solo se habilite cuando en el input teclee 'hola'? y de esta se ejecute mi evento. Casi me funciona, pero no se que ocurre.

function comprobar() {
    if (this.value != 'hola'){
        var pagar = document.getElementById('botones');
        pagar.disabled = true;
    }
}
  
<br>
<img class='paypal' src='fotos/paypal.png'/>
<input type='text' name='clave' onkeyup='comprobar()' />

<form action='pagado.php' method='post'>
    <p>
        <span>
            <input id='botones' type='submit' value='Pagar' onclick='return comprar()' />
        </span>
    </p>
</form>
<br>

2
  • Lo que quieres es que el boton este deshabilitado si no hay nada escrito? Commented el 12 dic. 2019 a las 16:44
  • Si, y que solo se habilite con 'hola', si se teclea otra cosa distinta ha de seguir deshabilitado.
    – user09b
    Commented el 12 dic. 2019 a las 16:47

2 respuestas 2

5

No ocupas de PHP sino de JS para poder manipular dichos nodos, considero debes proceder de este modo:

  • Al button le aplicas a nivel de HTML el atributo disabled para que por defecto este deshabilitado
  • Obtienes por medio de su id al input
  • Una vez que tienes en una variable el input, vas a usar el evento keyup para revisar lo que el usuario escribe a medida que suelta cada tecla que presiona
  • Verificas si de dicha variable su propiedad value es igual a hola
  • De resultar ciento lo anterior, entonces colocas en false la propiedad disabled del button que recuperamos por medio de su id y en caso negativo es decir que no se cumpla, entonces mantienes como true la propiedad disabled

Ejemplo

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo 1</title>
    </head>
    <body>
    <input type="text" id="condicion" />
    <button disabled id="pago">Pagar</button>
    <script>
        let activador = document.getElementById("condicion")
        activador.addEventListener("keyup", () => {
          if(activador.value === "hola"){
            document.getElementById("pago").disabled = false
          }else{
            document.getElementById("pago").disabled = true
          }
        })
    </script>
    </body>
    </html>

1
  • y en caso de tener otro botón, en el cual al hacer el tercer click este se desactive, sería así? echo "<input id='botones' type='submit' name='enviar' value='añadir a carrito'/><br><br>";?> <script> var cantidad=document.getElementById('botones') cantidad.addEventListener('onmousedown',()=>{ if(cantidad.value>3){ document.getElementById('botones').disabled=true } }) </script>
    – user09b
    Commented el 12 dic. 2019 a las 19:04
1

Tienes que capturar el valor del input y comparar. Algo asi:

<script>
    function comprobar() {
        var clave = document.getElementById('clave');
        var pagar = document.getElementById('botones');
        pagar.disabled = true;
        if (clave.value == "hola"){            
            pagar.disabled = false;
        }
    }
</script>
<br>
<img class='paypal' src='fotos/paypal.png'/>
<input type='text' name='clave' id='clave' onkeyup='comprobar()' />

<form action='pagado.php' method='post'>
    <p>
        <span>
            <input id='botones' type='submit' value='Pagar' onclick='return comprar()' disabled />
        </span>
    </p>
</form>
<br>

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.