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

    Use Radio Button Value to trigger show/hide DIV

    I'm new to JavaScript and I just can't seem to figure out what I am missing here--I'm sure its something incredibly simple.

    My code is inelegant, but so far it works to show/hide tables based on radio button selections. Clicking any of the non "default" radio buttons will show <div name="set1">.

    My problem is that I need to hide "set1" if and only if all of the port radio buttons are set to "default." I have tried to set up a checkstate () function to do this, but have failed miserably.

    The javascript portion is reproduced below, and the entire page code is attached. Any help would be greatly appreciated.

    <script type="text/javascript">
    function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
    };

    function show(id) {
    document.getElementById(id).style.visibility = "visible";
    };
    </script>

    <script type="text/javascript">
    function checkstate() {

    if ( form1.port1.value == "default" && form1.port2.value == "default" && form1.port3.value == "default" && form1.port4.value == "default")
    {
    document.set1.style.visibility = "hidden";
    }
    };
    </script>
    Attached Files Attached Files

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Made a couple of assumptions here...
    Code:
    <script type="text/javascript">
    
    function hide()
    {
    	for (var el, a  = 0; a < arguments.length; ++a)
    	{
    		if (el = document.getElementById(arguments[a]))
    			el.style.visibility = 'hidden';
    	}
    }
    
    function show()
    {
    	for (var el, a  = 0; a < arguments.length; ++a)
    	{
    		if (el = document.getElementById(arguments[a]))
    			el.style.visibility = 'visible';
    	}
    }
    
    function checkstate(oForm)
    {
    	if (oForm.port1[0].checked && oForm.port2[0].checked && oForm.port3[0].checked && oForm.port4[0].checked)
    		hide('set1');
    }
    
    onload = function() 
    {
    		var oForm = document.form1;
    		oForm.port1[0].checked = true;
    		oForm.port2[0].checked = true;
    		oForm.port3[0].checked = true;
    		oForm.port4[0].checked = true;
    }
    
    </script>
    Your errors: referring to a radio collection (same names) without an index; checking its .value (irrelevent - you need to know if it's .checked).

    btw I'd consider using the style.display property here, hiding entire 'panels' as needed; I would have written you a quick demo, but you'd need to reorganize the layout to include the legend (on the left) as part of each panel - and I'm lazy. Good idea, though. Just use identical tables, one above the other, each with its own legend. You don't need all the divs: td cells come completely equipped with all the usual HTMLElement goodies (at no additional cost).
    Last edited by adios; 10-28-2003 at 02:03 AM.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You don't need all the divs: td cells come completely equipped with all the usual HTMLElement goodies
    Well, I don't think that is quite a general solution, at least not for all the proprieties. Try to position absolute a TD in IE and in NS, you will see the difference....

    using DIVs seems safer for me (even I reckon I always use direct identification on other tags, like IFRAME)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New to the CF scene
    Join Date
    Oct 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for the suggestions.

    I am off to try them.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Aargh. Forgot something....the HTML (helps).
    Code:
    <body bgcolor="#FFFFFF" text="#000000">
    <form name="form1" method="post" action="">
      <table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <table width="100%" border="1" cellspacing="0" cellpadding="0">
              <tr> 
                <td width="120">Features</td>
                <td width="120">Port 1</td>
                <td width="120">Port 2</td>
                <td width="120">Port 3</td>
                <td width="120">Port 4</td>
              </tr>
              <tr> 
                <td width="120">Port Options</td>
                <td width="120"> 
                  <input type="radio" name="port1" value="default" checked 
    		onclick="hide('port1top','port1bot');checkstate(this.form)">
                  Default<br>
                  <input type="radio" name="port1" value="tunneling" 
    		onclick="hide('port1bot');show('port1top','set1')">
                  Tunneling<br>
                  <input type="radio" name="port1" value="raw" 
    		onclick="hide('port1top');show('port1bot','set1')">
                  Raw TCP</td>
                <td width="120"> 
                  <input type="radio" name="port2" value="default" checked 
    		onclick="hide('port2top','port2bot');checkstate(this.form)">
                  Default<br>
                  <input type="radio" name="port2" value="tunneling" 
    		onclick="hide('port2bot');show('port2top','set1');">
                  Tunneling<br>
                  <input type="radio" name="port2" value="raw" 
    		onclick="hide('port2top');show('port2bot','set1')">
                  Raw TCP</td>
                <td width="120"> 
                  <input type="radio" name="port3" value="default" checked 
    		onclick="hide('port3top','port3bot');checkstate(this.form)">
                  Default<br>
                  <input type="radio" name="port3" value="tunneling" 
    		onclick="hide('port3bot');show('port3top','set1');">
                  Tunneling<br>
                  <input type="radio" name="port3" value="raw" 
    		onclick="hide('port3top');show('port3bot','set1')">
                  Raw TCP</td>
                <td width="120"> 
                  <input type="radio" name="port4" value="default" checked 
    		onclick="hide('port4top','port4bot');checkstate(this.form)">
                  Default<br>
                  <input type="radio" name="port4" value="tunneling" 
    		onclick="hide('port4bot');show('port4top','set1')">
                  Tunneling<br>
                  <input type="radio" name="port4" value="raw" 
    		onclick="hide('port4top');show('port4bot','set1')">
                  Raw TCP</td>
              </tr>
            </table>

  • #6
    New to the CF scene
    Join Date
    Oct 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much for the extra effort to post the html portion.

    I figured it out on my own--kinda. I really don't want the buttons to revert to "default" or checked on load, so I just deleted the var portion of the code, and used:

    function checkstate()
    {
    if (document.form1.port1[0].checked && document.form1.port2[0].checked && document.form1.port3[0].checked && document.form1.port4[0].checked)
    hide('set1');
    }

    That did the trick. And, it let me create a second function for the second table of data (contained in the same form) too.

    Which brings me to my next question, if I am not pressing my luck here--

    I've got the two tables functioning as desired, but would love to get some dynamic spacing going that would pull them both closer together when the DIV portions are hidden and space them out when the DIVs are visible. Any suggestions?

    The new page code is attached.

    All the help is very much appreciated!
    Attached Files Attached Files

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    hi, Lisa.

    OK. Got in a little CSS practice here. It's completely possible - in-for-a-dollar, etc. - to toggle display on the entire thing, using just a toolbar at the top to switch between panels. I have a feeling you can handle that one yerself.

    cya, adios
    Attached Files Attached Files
    Last edited by adios; 10-29-2003 at 07:41 AM.

  • #8
    New to the CF scene
    Join Date
    Oct 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow adios! Thank you! Much more help than I expected.

    I can indeed take it from here.

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    OK, here's a tip to use visibility:visible/hidden or display:inline/none.

    If use visibility:hidden as a propriety, the object become transparent, but it keeps it's place on the page, position and dimensions. If use display:none the object disapears entirely, so the place where he was becomes empty... Now you have to know these when trying to move or hide some objects on the screen. In your case, if you are using dispaly you can make those tables come near, or something like that.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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