I saw an example on a website one time (which I didn't bookmark) that had a drop down menu. This menu listed 1, 2, 3, 4, 5, etc. When you selected 1, one input box would appear underneath it. When you selected 2, two input boxes appeared beneath. And 3, you guessed it, three input boxes appeared beneath the drop down menu. I remember looking at the code, and I believe javascript was used to create this type of application. Unfortunately, I have no idea how to do it, and it would be extremely useful in a project I am working on right now. If anyone knows of an example of this, or how to do it, I could really use some help. Thanks!
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 Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Multiple Input Boxes
- Thread starter zcole
- Start date
dwarfthrower
Programmer
There are a couple of ways you could do it.
Firstly, if you know the maximum number of input boxes you are going to support you can create all the input boxes in advance (in you HTML code) and selectively hide / show them based on the number selected in your drop-down list:
If you need a dynamic number of boxes then we'll have to look at a DOM manipulation routine.
[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Firstly, if you know the maximum number of input boxes you are going to support you can create all the input boxes in advance (in you HTML code) and selectively hide / show them based on the number selected in your drop-down list:
Code:
<html>
<head>
<script>
function showBoxes(objSelect){
//hide all the boxes
var totalBoxes = objSelect.options.length - 1;
for(var i = 1; i <= totalBoxes; i++){
document.getElementById("input" + i).style.display = "none";
}
//show the number of boxes you need
var shownBoxes = objSelect.selectedIndex;
for(var i = 1; i <= shownBoxes; i++){
document.getElementById("input" + i).style.display = "inline";
}
}
</script>
</head>
<body>
How many boxes: <select id="myselect" onchange="showBoxes(this)">
<option value="0">0</option>
<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><br>
<input style="display:none" type="text" name="input1" id="input1"><br>
<input style="display:none" type="text" name="input2" id="input2"><br>
<input style="display:none" type="text" name="input3" id="input3"><br>
<input style="display:none" type="text" name="input4" id="input4"><br>
<input style="display:none" type="text" name="input5" id="input5">
</body>
</html>If you need a dynamic number of boxes then we'll have to look at a DOM manipulation routine.
[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question
- Locked
- Question