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

    Problem with form hiding elements with radio button and script

    Hello,

    Hope someone can help me, I'm trying to hide elements on a form that I have wrapped in tables with ID's based on the selection of a radio button (na) in a group of radio buttons. I can do it with a check box, but I'm not sure how to make the script activate on value instead of just on click. On click wont work when I have the radio buttons with the same name.

    The way I have it now I had to set a specific name for the radio button that will hide/show the below information and that just wont work because the whole point of the two radio buttons is to select one or the other, and now both can be selected.

    Basically if the person selects NA it should hide the below table, and if they select Yes, it should then show the table. I'll be doing this with multiple questions so hiding and showing by the ID set to the table is important.

    Hope that made sense, can anyone help?

    Code:
    <html>
    
    <head>
    <title>Questions</title>
    
    <script language="javascript">
    
    var ie4 = false; if(document.all) { ie4 = true; }
    function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }
    function toggle(link, divId) 
    {
    var d = getObject(divId);
    var fs_1na = document.getElementById ('fs_1na');
    
    if (fs_1na.checked == false) 
    	{
    	d.style.display = 'block'; 
    	}
     else 
    	{
    	d.style.display = 'none'; 
    	}
    }
    
    </script>
    
    </head>
    <body>
    <table>
    	<tr class="rowB">
    		<td>
    			<label for="fs_1">
    				<p>
    					6. If answered yes please continue with 1a, 1b, and 1c.
    				</p>
    			</label>
    		</td>
    		<td>
    			Yes <input type="radio" name="fs_1" value="yes">
    		</td>
    		<td>
    			NA <input type="radio" name="fs_1na" value="na" onclick="toggle(this, 'exp1');">										
    		</td>
    	</tr>
    </table>
    <table id="exp1">
    	<tr class="rowB">
    		<td>
    			1a.
    		</td>
    		<td>
    			<label for="fs_6a">
    				Question 1a.
    			</label>
    		</td>
    		<td>
    			Yes <input type="radio" name="fs_1a" id="1" value="yes">
    		</td>
    		<td>
    			No <input type="radio" name="fs_1a" id="2" value="no">
    		</td>
    	</tr>
    	<tr class="rowB">
    		<td>
    			1b.
    		</td>
    		<td>
    			<label for="fs_1b">
    				Question 1b.
    			</label>
    		</td>
    		<td>
    			Yes <input type="radio" name="fs_1b" id="1" value="yes">
    		</td>
    		<td>
    			No <input type="radio" name="fs_1b" id="2" value="no">
    		</td>
    	</tr>
    	<tr class="rowB">
    		<td>
    			1c.
    		</td>
    		<td>
    			<label for="fs_1c">
    				Question 1c.
    			</label>
    		</td>
    		<td>
    			Yes <input type="radio" name="fs_1c" id="1" value="yes">
    		</td>
    		<td>
    			No <input type="radio" name="fs_1c" id="2" value="no">
    		</td>
    	</tr>
    </table>
    <script language="javascript">toggle(getObject('exp1_link'), 'exp1');</script>
    </body>
    </html>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    function showHideTable(divId, showFlag){
      document.getElementById(divId).style.display = (showFlag) ? "block":"none";
    }
    Code:
    Yes <input type="radio" name="fs_1" value="yes" onclick="showHideTable('exp1', true);" />
    NA  <input type="radio" name="fs_1" value="na" onclick="showHideTable('exp1', false);" />

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you that is working out wonderfully. It's so simple and compact.

    Question for you though what would be modified in the script to make the default state as false?

    Regards,
    Ron

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Call showHideTable('exp1', false) onload.


  •  

    Posting Permissions

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