2

Esto es lo que he intentado

<a class="step_block" onClick="activar()" href="" target="_blank" rel="nofollow noreferer">
</a>

   <script language="javascript">
       function activar(){
          document.getElement.ById('buttone').disabled = false;
        }


    </script>

<form action="<?php echo $result ?>">
<button id="buttone" disabled="true" style="background-color:#26a69a;" target="_blank" class="btn waves-effect waves-light" type="submit" name="action">Proceed to target site</button>
</form>

También me gustaria que fuera al clickar dos botones no uno :). Un saludo

Ahora mismo el problema de este código es que la etiqueta disabled = false no desactiva si no que sigue igual. (Da igual que pongas disabled=pepito que va a estar desactivado)

Mi codigo actual

<div class="all_steps">
<a data-clickado="false" class="step_block" href="https://www.youtube.com/channel/" target="_blank" rel="nofollow noreferer" data-clickado="false">
<div style="background-image:url('https://i.imgur.com/DhSqcGy.png')" class="step_left"></div>
<div class="step_content"><h2 style="text-align:left;">Subscribe</h2>
<p style="text-align:left;">Subscribe to <?php echo $refername; ?> to proceed.</p>
</div><div class="step_arrow"></div>
</a>
<br>
<a data-clickado="false" class="step_block" href="https://twitter.com/intent/follow?" target="_blank" rel="nofollow noreferer">
<div style="background-image:url('https://i.imgur.com/TlYkMkc.png')" class="step_left"></div>
<div class="step_content"><h2 style="text-align:left;">Follow</h2><p style="text-align:left;">Follow <?php echo $refername; ?> to proceed.</p></div><div class="step_arrow"></div></a> </div>
<br>
<form action="<?php echo $result["shortenedUrl"] ?>">
<button id="buttone" disabled="true" style="background-color:#26a69a;" target="_blank" class="btn waves-effect waves-light" type="submit" name="action">Proceed to target site</button>
</form>
<div class="card_share">
</div>
</div>
</section>
<?php
require('inc/service.php');
require('inc/footer.php');
?>
<script language="javascript">

  window.addEventListener('load', () => {
    // Cuando la pagina termine de cargar, anadimos los eventos a los botones.

    document.querySelectorAll('a[data-clickado]').forEach(el => {
      el.addEventListener('click', activar);
    });
  });


   function activar(e){

      let salir = false;

      e.target.dataset.clickado = true; // Guardamos el data para saber que el boton ha sido activado

      document.querySelectorAll('a[data-clickado]').forEach(el => {

          if (!salir && el.dataset.clickado === 'false') {

              salir = true; // En caso en que falte un boton por activar avisamos a la variable

          }

      });

      if (!salir) document.querySelector('#buttone').disabled = false; //activamos el boton si esta todo bien

    }


</script>
1
  • ¿No es más simple usar checkboxes en este caso?. Escuchas cada cambio y activas el botón únicamente cuando todos estén seleccionados. Sería algo parecido al segundo fragmento de código mostrado aquí. En él se determina cuando están todos desmarcados, sería sólo cambiar la lógica a todos marcados. El problema que veo con los elementos del tipo a es que te obliga a guardar en un atributo data los estados del click, en cambio con un checkbox no haría falta. Además, con el elemento a es complicado saber si se revertió el click...
    – A. Cedano
    Commented el 15 mar. 2019 a las 11:25

2 respuestas 2

3

Primero comentarte, que el metodo para encontrar un elemento por id es getElementById(). Aunque es más recomendable utilizar querySelector().

La solución a tu fallo:

<a class="step_block" onclick="activar()" href="" target="_blank" rel="nofollow noreferer">Boton1
</a>

   <script language="javascript">
       function activar(){

          document.getElementById('buttone').disabled = false;

        }


    </script>

<form action="<?php echo $result ?>">
<button id="buttone" disabled="true" style="background-color:#26a69a;" target="_blank" class="btn waves-effect waves-light" type="submit" name="action">Proceed to target site</button>
</form>

Una manera de implementar que sean 2 o el numero de botones que quieras:

    <a class="step_block" href="javascript: void(0)" target="_blank" rel="nofollow noreferer" data-clickado="false">Boton1
    </a>

    <a class="step_block" href="javascript: void(0)" target="_blank" rel="nofollow noreferer" data-clickado="false">Boton2
    </a>



    <form action="<?php echo $result ?>">
    <button id="buttone" disabled="true" style="background-color:#26a69a;" target="_blank" class="btn waves-effect waves-light" type="submit" name="action">Proceed to target site</button>
    </form>

<script language="javascript">

  window.addEventListener('load', () => {
    // Cuando la pagina termine de cargar, añadimos los eventos a los botones.

    document.querySelectorAll('a[data-clickado]').forEach(el => {
      el.addEventListener('click', activar);
    });
  });


   function activar(e){

      let salir = false;

      e.currentTarget.dataset.clickado = true; // Guardamos el data para saber que el boton ha sido activado

      document.querySelectorAll('a[data-clickado]').forEach(el => {

          if (!salir && el.dataset.clickado === 'false') {

              salir = true; // En caso en que falte un boton por activar avisamos a la variable

          }

      });

      if (!salir) document.querySelector('#buttone').disabled = false; //activamos el boton si esta todo bien

    }


</script>
8
  • No me funciona :(. Lo he probado tambíen en un documento aparte copiando lo que has puesto y nada, al dar click en los dos no se activa
    – user109229
    Commented el 15 mar. 2019 a las 7:47
  • La primera si funciona pero la segunda no :(
    – user109229
    Commented el 15 mar. 2019 a las 7:53
  • Perdona, habia unas erratas, ya deberia funcionar la segunda Commented el 15 mar. 2019 a las 7:56
  • Ahora me funciona separado, pero no en mi codigo, nose que error estoy cometiendo. :)
    – user109229
    Commented el 15 mar. 2019 a las 8:03
  • He actualizado la pregunta con el codigo que puse incluyendo el tuyo
    – user109229
    Commented el 15 mar. 2019 a las 8:04
2

Veo algunas cosas que están mal puestas, como el onclick y el document.getElement

<a class="step_block" onclick="activar()" href="" target="_blank" rel="nofollow noreferer">
</a>

   <script language="javascript">
       function activar(){
          document.getElementById('buttone').disabled = false;
        }
   </script>

<form action="<?php echo $result ?>">
<button id="buttone" disabled="true" style="background-color:#26a69a;" target="_blank" class="btn waves-effect waves-light" type="submit" name="action">Proceed to target site</button>
</form>

El evento onclick lo he puesto en minúscula y en document.getElementById te sobraba un punto.

1
  • Gracias :). Ahora voy a intentar hacerlo con dos
    – user109229
    Commented el 15 mar. 2019 a las 7:51

Tu Respuesta

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