...

View Full Version : Hidden text to reveal on certain conditions..



hans_cellc
10-13-2011, 10:36 AM
Hi I have the following code. What I want to do is for certain questions to remain hidden inless certain conditions are met, then they appear to be answered. I am thinking with the <div> but not sure how. I also thought maybe with css but cant write a if statement in css so that a no go.

Please help.


<tr><td align="left">Do you own a Yorkie?<br />
<input type="radio" name="owner" value="yes" /> Yes
<input type="radio" name="owner" value="no" checked="checked" /> No<br />
<!-- If answer is no above the below questions are hidden, if yes then they appear -->>
<div id="breeders">
How many? <select name="qnty" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5+</option></select>
Are you a breeder? <input type="radio" name="breeder" value="yes" checked="checked" /> Yes
<input type="radio" name="breeder" value="no" /> No</div></td></tr>

JavaScript Code: I am using a onload within the form opening tag

function showDiv() {
if(document.forms[2].owner.value == "yes") {
document.getElementById('breeders').style.visibility = 'visible';
}
else
document.getElementById('breeders').style.visibility = 'hidden';
}

hans_cellc
10-13-2011, 11:49 AM
I got it: in my body I placed the following onload:


onload="document.getElementById('breeders').style.visibility = 'hidden';"

I then changed my javaScript to two seperate functions:


function showDiv() {
document.getElementById('breeders').style.visibility = 'visible';
}

function hideDiv() {
document.getElementById('breeders').style.visibility = 'hidden';
}

and then added to calling handlers:


<tr><td align="left">Do you own a Yorkie?<br />
<input type="radio" name="owner" value="yes" onclick="showDiv()" /> Yes
<input type="radio" name="owner" value="no" checked="checked" onclick="hideDiv()" /> No<br />
<!-- If answer is no above the below questions are hidden, if yes then they appear -->
<div id="breeders">
How many? <select name="qnty" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5+</option></select>
Are you a breeder? <input type="radio" name="breeder" value="yes" /> Yes
<input type="radio" name="breeder" value="no" checked="checked" /> No</div></td></tr>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum