I have a dropdown box that allows users to select how many inputs they have. So for example perhaps they want to enter one word, they'll select one. If they want to enter two words, they'll select two.
Depending on which option they choose, I want to create that many textboxes below that I can also refer to using other scripts (like maybe through indexing).
Is there a way to do this?
Sure, use Javascript to manipulate the DOM. In it's simplest form you could do something like:
document.getElementById('someDiv').innerHTML += "<label>Label:</label><input type='file' value='' />";
Or using something like JQuery:
var new_field = " <label>SomeLabel: </label> <input type = "text" / >";
$("#sonmeSelector").before(new_field);
do you want some thing like this (done with jQuery 1.4.4):
HTML
<html>
<head>
<title>Multiple Input</title>
</head>
<body>
<select id="amount" name="amount" onchange="addInput();">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>
<div id="inputs">
</div>
</body>
</html>
JS
function addInput(){
var amount = $('#amount').val();
var inputs = $('#inputs').empty();
for(i = 0; i < amount; i++) {
inputs.append('<input type="text" name="input[' + i + ']" /> ');
}
}
Also look at my jsfiddle http://jsfiddle.net/8KqUt/
