I've created this but it has more options so I narrowed it down for an example. My problem is, I need to cut down the space created by all of the hidden form inputs. How can I do this? If I have 10 options, there is a bunch of blank space there before the next input. Not to mention, if they choose the 10th choice, they may not even see that anything has popped up. Is there a way to change all of that?
Here's what I have....
<script type="text/javascript">
function selectevent(){
if(this.value == "choice1")
document.getElementById( "dv3").style.visibility = "hidden";
if(this.value == "choice1")
document.getElementById( "dv2").style.visibility = "hidden";
if(this.value == "choice1")
document.getElementById( "dv1").style.visibility = "visible";
if(this.value == "choice2")
document.getElementById( "dv2").style.visibility = "visible";
if(this.value == "choice2")
document.getElementById( "dv1").style.visibility = "hidden";
if(this.value == "choice2")
document.getElementById( "dv3").style.visibility = "hidden";
if(this.value == "choice2")
document.getElementById( "dv3").style.visibility = "visible";
if(this.value == "choice2")
document.getElementById( "dv2").style.visibility = "hidden";
if(this.value == "choice2")
document.getElementById( "dv1").style.visibility = "hidden";
}
</script>
Event:
<select name="event" id="sel1">
<option value="">Select...</option>
<option value="choice1">choice1</option>
<option value="choice2">choice2</option>
<option value="choice3">choice3</option>
</select>
<div id="dv1" style="visibility: hidden">
1:
<input type="varchar" id="txt1" name="choice1">
</div>
<div id="dv2" style="visibility: hidden">
2:
<input type="varchar" id="txt2" name="choice2">
</div>
<div id="dv3" style="visibility: hidden">
3:
<input type="varchar" id="txt3" name="choice3">
</div>
<script type="text/javascript">
document.getElementById( "sel1").onchange = selectevent;
</script>