Toggle Visibility

[vchris]

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>

HTML:

<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.

[aalbetski]

trt this:<input type="radio" name="sourceClass" value="Point Source" onClick="toggleVisible(this);" /> Point Source<br />function toggleVisible(object) { object.style.display = 'none';}

[Skemcin]

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.

[vchris]

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.

[Skemcin]

Cool - I replied to the other post. And I will try to get back to the Array post as well.