If yes then explain [Archive]

kaifanun

07-27-2004, 12:40 AM

Hi everyone, (sorry if this question has been asked before but I could not find it.)
So here it is.

I'm creating a form where I’m asking my users “yes, no” questions. What I want to do is when the user selects yes then a text box will become visible to give the user chance to explain. But if they select no then the explanation text box is not visible.

Can any one help me?

Thank you all in advance.

sad69

07-27-2004, 01:06 AM

Sure. Now I'm assuming this is not a dynamic form, so here's how I would do it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style>
.hiddenElem {
visibility:hidden;
display:none;
}

.shownElem {
visibility:visible;
display:inline;
}</style>

<script>
function hideElement(elemId) {
var elem = document.getElementById(elemId);
elem.setAttribute('className', 'hiddenElem');
}

function showElement(elemId) {
var elem = document.getElementById(elemId);
elem.setAttribute('className', 'shownElem');
}

function show_or_hide(val, showVal, elemId) {
if(val == showVal) {
showElement(elemId);
}
else {
hideElement(elemId);
}
}
</script>

</head>
<body>

<select name="mySel" onChange="show_or_hide(this.value, 'Yes', 'myText');">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<input type="text" name="myText" id="myText" class="hiddenElem">

</body>
</html>

I've coloured the important/connected bits of code in dark red.. let me know if any of it doesn't make sense or it doesn't work.

Sadiq.

kaifanun

07-27-2004, 11:58 PM

thanx for the code. That works just fine. :thumbsup:
One more question, is there a reason why it wont work on Netscape? I have Nestscape 7.1 and the script is not working.

sad69

07-28-2004, 12:33 AM

Ok after a bunch of fiddling, I've got it working in both IE and Netscape/Firefox.. you may want to clean up any unused coding:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style>
.hiddenElem {
visibility:hidden;
display:none;
}

.shownElem {
visibility:visible;
display:inline;
}
</style>

<script>
function hideElement(elemId) {
var elem = document.getElementById(elemId);
//elem.setAttribute('className', 'hiddenElem');
elem.style.visibility = 'hidden';
elem.style.display = 'none';
}

function showElement(elemId) {
var elem = document.getElementById(elemId);
//elem.setAttribute('className', 'shownElem');
elem.style.visibility = 'visible';
elem.style.display = 'inline';
}

function show_or_hide(val, showVal, elemId) {
if(val == showVal) {
showElement(elemId);
}
else {
hideElement(elemId);
}
}
</script>

</head>
<body>

<select name="mySel" onChange="show_or_hide(this.options[this.selectedIndex].value, 'Yes', 'myText');">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<input type="text" name="myText" id="myText" class="hiddenElem">

</body>
</html>

Sadiq.

glenngv

07-28-2004, 06:30 AM

You can still use the class name by doing:

elem.className = 'hiddenElem';

instead of:

elem.setAttribute('className', 'hiddenElem');

I think NS likes it as elem.setAttribute('class', 'hiddenElem');