我有一个名为Number of messages 的表单字段，根据用户指定的数字，我希望在下面动态生成确切数量的文本字段，以允许用户输入指定数量的消息。
我浏览了一些使用 JQuery 生成动态表单字段的示例，但由于我不熟悉 JQuery，因此这些示例对我来说有点过于复杂，无法掌握。我确实了解 JavaScript 的基础知识，如果我能找到使用 JavaScript 的查询的解决方案，我将不胜感激。
【问题讨论】：
标签： javascript html forms
function addinputFields(){
var number = document.getElementById("member").value;
for (i=0;i<number;i++){
var input = document.createElement("input");
input.type = "text";
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
}
和html代码将是
Number of members:<input type="text" id="member" name="member" value=""><br />
<button id="btn" onclick="addinputFields()">Button</button>
<div id="container"/>
fiddle这里
【讨论】：
你可以试试类似的...
var wrapper_div = document.getElementById('input_set');
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
var n = document.getElementById("no_of_fields").value;
var fieldset = document.createElement('div'),
newInput;
for (var k = 0; k < n; k++) {
newInput = document.createElement('input');
newInput.value = '';
newInput.type = 'text';
newInput.placeholder = "Textfield no. " + k;
fieldset.appendChild(newInput);
fieldset.appendChild(document.createElement('br'));
}
wrapper_div.insertBefore(fieldset, this);
}, false);No. of textfields :
<input id="no_of_fields" type="text" />
<div id="input_set">
<p>
<label for="my_input"></label>
</p>
<button id="btn" href="#">Add</button>
</div>【讨论】：
这是一个简单的任务，使用 jQuery 变得更简单。您需要首先从可以使用 .val() 或 .value 的输入字段中获取值。获得值后，检查它是否为整数。现在，只需使用 .append() 函数来动态添加元素。
HTML
<form id="myForm">
Number of Messages: <input id="msgs" type="text"> </input>
<div id="addmsg">
</div>
</form>
JAVASCRIPT
$("#msgs").on('change', function()
{
var num = this.value;
if(Math.floor(num) == num && $.isNumeric(num))
{
$("#addmsg").text('');
for(var i = 0; i < num; i++)
{
$("#addmsg").append("<input type='text'/><br/>");
}
}
});
注意，每次输入中的值发生变化时，我首先通过以下方式清除 div：
$("#addmsg").text('');
然后我循环并继续添加输入字段。我希望这会有所帮助！
【讨论】：