Creating multiple input fields
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 ent开发者_如何学Goer 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/
加载中,请稍侯......
精彩评论