[英]Dynamically adding HTML form fields based on a number specified by the user
我有一个名为Number of messages
的表单字段,并且根据用户指定的数字,我希望在下面动态生成准确数量的文本字段,以允许用户输入指定数量的消息。
我浏览了一些使用JQuery生成动态表单字段的示例,但是由于我不熟悉JQuery,所以这些示例对于我来说太复杂了。 我确实了解JavaScript的基础知识,如果能找到使用JavaScript查询的解决方案,我将不胜感激。
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"/>
在这里摆弄
您可以尝试类似的方法...
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('');
然后循环并继续添加输入字段。 我希望这有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.