Let's say I have a form that has, among other controls, a drop-down box that contains YES and NO in response to a question. If the user selects YES, I want three text boxes to appear below the checkbox. If the user selects NO (default), then I want the text boxes to remain hidden. How can I do this, either in Jscript or VBscript?
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations sizbut on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Show/Hide Text Fields Based on User Reponse
- Thread starter byrne1
- Start date
You will probably need to reload the form if you use VBScript. But you can do everything in JavaScript very easily. Create a <div> element, something like this: <div id="desc1" style="VISIBILITY: hidden; POSITION: absolute;"><p>Your text boxes here</p></div> Then you will need to write a JavaScript function that will change the visibility and position of this <div> element depending on the value selected in your text box. Then refer to this function in the onChange event.
- Thread starter
- #3
Basically, you source will look like this:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<script language="JavaScript">
function showdiv() {
var dropValue = document.all.select1.value;
var strComment = eval("document.all.desc1"
if (dropValue == "Yes" {
strComment.style.visibility = "visible";
strComment.style.position = "fixed";
} else {
strComment.style.visibility = "hidden";
strComment.style.position = "absolute";
}
}
</script>
</HEAD>
<BODY>
<p><select name="select1" onchange="return showdiv();">
<option selected value="No">No</option>
<option value="Yes">Yes</option></select>
</p>
<div id="desc1" style="VISIBILITY: hidden; POSITION: absolute;">
<p><input type="text" name="text1"><br>
<input type="text" name="text2">
</p>
</div>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<script language="JavaScript">
function showdiv() {
var dropValue = document.all.select1.value;
var strComment = eval("document.all.desc1"
if (dropValue == "Yes"
{strComment.style.visibility = "visible";
strComment.style.position = "fixed";
} else {
strComment.style.visibility = "hidden";
strComment.style.position = "absolute";
}
}
</script>
</HEAD>
<BODY>
<p><select name="select1" onchange="return showdiv();">
<option selected value="No">No</option>
<option value="Yes">Yes</option></select>
</p>
<div id="desc1" style="VISIBILITY: hidden; POSITION: absolute;">
<p><input type="text" name="text1"><br>
<input type="text" name="text2">
</p>
</div>
</BODY>
</HTML>
- Thread starter
- #5
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question
- Locked
- Question