javascript 根据用户指定的数字动态添加 HTML 表单字段
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/31988183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically adding HTML form fields based on a number specified by the user
提问by Manas Chaturvedi
I've a form field named Number of messages
, and based on what number the user specifies, I want the exact number of text fields to be dynamically generated below to allow users to enter specified number of messages.
我有一个名为 的表单字段Number of messages
,根据用户指定的数字,我希望在下面动态生成确切数量的文本字段,以允许用户输入指定数量的消息。
I have browsed through some examples where JQuery is used to generate dynamic form fields, but since I'm not acquainted with JQuery, those examples are a bit too complex for me to grasp. I do know the basics of JavaScript, and would really appreciate if I could find a solution to my query using JavaScript.
我浏览了一些使用 JQuery 生成动态表单字段的示例,但由于我不熟悉 JQuery,这些示例有点过于复杂,我无法掌握。我确实了解 JavaScript 的基础知识,如果我能找到使用 JavaScript 的查询解决方案,我将不胜感激。
采纳答案by htoniv
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"));
}
}
and html code will be
和 html 代码将是
Number of members:<input type="text" id="member" name="member" value=""><br />
<button id="btn" onclick="addinputFields()">Button</button>
<div id="container"/>
fiddlehere
在这里摆弄
回答by arunatebel
You can try something similar to this...
你可以尝试类似的东西......
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>
回答by GobSmack
It is a simple task which is made simpler with jQuery. You need to first get the value from the input field for which you can use .val() or .value. Once you get the value, check if it is an integer. Now, simply use .append() function to dynamically add the elements.
这是一个简单的任务,使用 jQuery 变得更简单。您需要首先从可以使用 .val() 或 .value 的输入字段中获取值。获得值后,检查它是否为整数。现在,只需使用 .append() 函数来动态添加元素。
HTML
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/>");
}
}
});
Note, everytime the value in the input changes, I am first clearing the div by:
请注意,每次输入中的值发生变化时,我首先通过以下方式清除 div:
$("#addmsg").text('');
And then I loop and keep adding the input field. I hope this helps!
然后我循环并不断添加输入字段。我希望这有帮助!