Jump to content

Toggle Visibility

Recommended Posts

I'm a total Noob when it comes to javascript. It just seems to never work for me. Ok now my problem.I am trying to change the display property of a form element when a certain radio button is checked to none so it's invisible. I can't seem to get it to work. Script:

<script language="javascript">function toggleVisible() {	document.sourceType.style.display = 'none';}</script>


<p><label>Source Classification <span class="star">*</span></label><input type="radio" name="sourceClass" value="Point Source" onClick="toggleVisible();" /> Point Source<br /><input type="radio" name="sourceClass" value="Non-Point Source" /> Non-Point Source<br /><input type="radio" name="sourceClass" value="Overarching Document" /> Overarching Document<br /><input type="radio" name="sourceClass" value="Emission Scenario Document" /> Emission Scenario Document</p>		<p><label>Source Type <span class="star">*</span></label><input type="radio" name="sourceType" value="Industry" /> Industry<br /><input type="radio" name="sourceType" value="Industrial Process/Activity" /> Industrial Process/Activity<br /><input type="radio" name="sourceType" value="Chemicals" /> Chemicals<br /><input type="radio" name="sourceType" value="Area Sources" /> Area Sources</p>

So basically what I want is when the first radio button is checked (Point Source) all the Source Type radio options should be invisible for testing purposes. I should probably put a div around the Source Types so even the label would be invisible.Edit:I created a div with a unique id around the radios and did this instead:

document.getElementById('sourceTypeContainer').style.display = 'none';

Seems to work well. If you have a better idea let me know.

Link to post
Share on other sites

Well,This is how I do it:

<style type="text/css">.switchcontent{	display:none;	}</style><script type="text/javascript" src="http://www.iribbit.net/i/_files/toggle.js"></script><a href="java script: void(0);" style="" onmouseover="this.style.cursor='hand'" onclick="expandcontent('xxxxxx')" title="xxxxxx">xxxxxx</a> | <a href="java script: void(0);" style="" onmouseover="this.style.cursor='hand'" onclick="expandcontent('yyyyyy')" title="yyyyyy">yyyyyy</a></div><br /><br /><br /><br /><!--- xxxxxx ---><div style="display:none;" class="switchcontent" id="xxxxxx"><strong>xxxxxx:</strong><br /></div><!--- yyyyyy ---><div style="display:none;" class="switchcontent" id="yyyyyy"><strong>yyyyyy:</strong><br /></div>

Just more the "expandcontent('xxxxxx')" and wrap the appropriate areas as needed for your application. Cross browser support and been reliable to me over the years.

Link to post
Share on other sites

Issue resolved. I'm up to the point where I need to query the db onChange of a select option. Please see my coldfusion thread for replies.http://w3schools.invisionzone.com/index.php?showtopic=8716Actually I got another problem. I want a select to appear a certain option in another select is selected.Here is my java script:

function showElements() {	if(document.getElementByName('docType').value == 20){		document.getElementById('estMethodContainer').style.display = 'block';	}}

Here is my HTML:

<div id="docTypeContainer">			<p><label>Document Type <span class="star">*</span></label>			<select name="docType" onChange="showElements();">				<option value="default">Make a Selection</option>				<cfoutput query="getDocTypes">					<option value="#getDocTypes.InfoType_Code#">#getDocTypes.Description_E#</option>				</cfoutput>			</select></p>		</div>

Nothing happens when I select the right option. My if statement in my javascript is correct, I have validated the value with the page source.EDIT:Here's what I read on a forum.

getElementsByName is wrongly implemented in all browsers but moz. So, don't use it. Besides, Glenn's method is just as good.
I added an id instead and it worked immediately.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...