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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    May 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Show Table if Checkbox is checked

    I have a survey form that I've created. I want to know is there a way to show a table (to collect additional information) if a visitor clicks a check box? And if the checkbox is unchecked the table stays hidden

    Your help is appreciated.
    Jody

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post
    there sure is!!

    on the check box, put the following code inside the tag

    Code:
    onchange="check(this)"
    so it should look something like

    Code:
    <input type="checkbox" name="xxx" value="xxx" onclick="check(this)">
    then put a javascript function such as

    Code:
    function check(ctrl)
    {
    	//get the state of the check box
    	if (ctrl.checked == true) {
    		//the box is checked, so show the table
    		document.all['moreInfo'].style.display = "inline";
    	} else {
    		//hide the table
    		document.all['moreInfo'].style.display = "none";
    	}
    }
    then you need to create the table and give it a name called "moreInfo"...eg:

    Code:
    <table border="0" id="moreInfo" style="display:none">
    <tr>
    <td>Something here</td>
    </tr>
    </table>
    let us know how you get on!
    Last edited by homerUK; 06-23-2004 at 09:08 PM.

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post
    ignore this message!! sorry!!
    Last edited by homerUK; 06-23-2004 at 09:09 PM. Reason: code was incorrect!

  • #4
    New to the CF scene
    Join Date
    May 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    Thanks that worked perfect!

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by jsedrick
    Thanks that worked perfect!
    no probs.. let us know if u need any modifications etc! good luck....

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You will need if you want to make it cross-browser.
    Code:
    function check(ctrl)
    {
        document.getElementById('moreInfo').style.display = (ctrl.checked) ? "":"none";
    }

  • #7
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wow... i know this is an old topic - 3 years old to be exact.. but glenngv's piece of code did exactly what i needed.. Thanks man....

    I do have a question tho, how would I use it multiple times on 1 page calling a different table each time..

    thanks in advance

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Use parameters.
    Code:
    function check(tableId, ctrl)
    {
        document.getElementById(tableId).style.display = (ctrl.checked) ? "":"none";
    }
    ...
    <input type="checkbox" name="xxx" value="xxx" onclick="check('moreInfo', this)">
    <input type="checkbox" name="yyy" value="yyy" onclick="check('whatever', this)">

  • #9
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Use parameters.
    Code:
    function check(tableId, ctrl)
    {
        document.getElementById(tableId).style.display = (ctrl.checked) ? "":"none";
    }
    ...
    <input type="checkbox" name="xxx" value="xxx" onclick="check('moreInfo', this)">
    <input type="checkbox" name="yyy" value="yyy" onclick="check('whatever', this)">
    i see i see... thanks alot

  • #10
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi,

    how do i make sure that when the page loads all the tables are hidden except when the check box is being check.

    and also how do i go about if i have 2 checkbox linked to 1 table. as long as either one of the check box is being check it should show the table

    thanks

  • #11
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    here is site example of the problem i am facing. Any help wil be greatly be appreciated thanks

    Problem initializing the checkboxes and also to displaying the table if either one of the checkbox is being displayed


  •  

    Posting Permissions

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