Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to display a hidden layer when checkbox selected?

    Hi there,

    Basically I'm creating a HTML form and when the checkbox is selected, I need a textbox to be displayed to capture some content. I presume the best way would be with Javascript and possibly hidden layers - if anybody could suggest the relevent code then that would be great!

    Thanks.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    function toggle(chk){
       chk.form.txt.style.display=(chk.checked)?"inline":"none";
    }
    Code:
    <form>
    <input type="checkbox" onclick="toggle(this)" />
    <input type="text" name="txt" style="display:none;" />
    </form>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the quick help on that - I also need to set the text corresponding to the new input text box to be hidden and then display as well, do you know how that would work?

    Many thanks for your help.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    function toggle(chk){
       document.getElementById("divTxt").style.display=(chk.checked)?"inline":"none";
    }
    Code:
    <form>
    <input type="checkbox" onclick="toggle(this)" />
    <div id="divTxt" style="display:none;">
    <label for="txtId">Text:</label>
    <input type="text" name="txt" id="txtId" />
    </form>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •