WordPress.org

Ready to get started?Download WordPress

Forums

How do I activate a button when click on a checkbox? (3 posts)

  1. sn07
    Member
    Posted 1 year ago #

    I have modified the bbpress form-topic.php file (in my child theme) to include a checkbox next to the submit button (for posting a new topic). This is to allow users to accept T&C's before posting something. Therefore what I would like is to only enable the submit button when the checkbox is ticked.

    I created a functions.php in my child theme.

    `<?php
    function apply_submit() {
    ?><script type="text/javascript">
    document.frm.bbp_topic_submit.disabled=true;
    if(document.frm.chk.checked==true) {
    document.frm.bbp_topic_submit.disabled=false;
    }
    if(document.frm.chk.checked==false) {
    document.frm.bbp_topic_submit.enabled=false;
    }
    </script><?php }?>`

    In form-topic.php I have:

    <div class="bbp-submit-wrapper">
    <form name="frm">
    <input type="checkbox" name="chk" onClick="apply_submit()">Tick to accept
    <button type="submit" disabled tabindex="<?php bbp_tab_index(); ?>" id="bbp_topic_submit" name="bbp_topic_submit" class="button submit"><?php _e( 'Submit', 'bbpress' ); ?></button>
    </form>

    The outcome of this is that the checkbox and submit button exist, but the button remains disabled even if I tick the checkbox. Therefore I don't think it is finding the function.
    I put some alerts in the function but none of these appeared when I check the box.

    Do you know what I could be missing?
    Thanks

  2. jnhghy
    Member
    Posted 1 year ago #

    //edit my mistake, you can't call a php function using "OnClick" with this you call only javascript functions
    Hi, can you please try this:
    In form-topic.php:

    <div class="bbp-submit-wrapper">
    <form name="frm">
    <input type="checkbox" name="chk" onClick="apply_submit()">Tick to accept
    <button type="submit" disabled="disabled" tabindex="<?php bbp_tab_index(); ?>" id="bbp_topic_submit" name="bbp_topic_submit" class="button submit"><?php _e( 'Submit', 'bbpress' ); ?></button>
    </form>

    and in footer.php you can add this text:

    <script type="text/javascript">
    function apply_submit() {
    document.frm.bbp_topic_submit.disabled=true;
    if(document.frm.chk.checked==true) {
    document.getElementById("bbp_topic_submit").removeAttribute("disabled");
    }
    if(document.frm.chk.checked==false) {
    document.getElementById("bbp_topic_submit").setAttribute("disabled", "disabled");
    }
    </script>

    Try it and let me know if it works, if it doesn't alert some text to see where it's broken so we can debug it; a link to your site might also help
    Regards

  3. sn07
    Member
    Posted 1 year ago #

    Thanks very much. It helped put me in the right direction. I had to make a few changes as it did not find the function at first. However I found that I need to use the id everywhere and not the name. So the final code is

    form-topic.php

    <div class="bbp-submit-wrapper">
    <form id="frm" name="frm">
    <input type="checkbox" id="chk" name="chk" onClick="apply_submit()">Tick to accept
    <button type="submit" disabled="disabled" tabindex="<?php bbp_tab_index(); ?>" id="bbp_topic_submit" name="bbp_topic_submit" class="button submit"><?php _e( 'Submit', 'bbpress' ); ?></button>
    </form>

    functions.php

    <script type="text/javascript">
    function apply_submit()
    {
     if(document.getElementById("chk").checked==true)
      {
        document.getElementById("bbp_topic_submit").removeAttribute("disabled");
      }
     if(document.getElementById("chk").checked==false)
      {
       document.getElementById("bbp_topic_submit").setAttribute("disabled", "disabled");
      }
    }
     </script>

Topic Closed

This topic has been closed to new replies.

About this Topic