动态添加输入元素以形成 [英] Adding input elements dynamically to form
问题描述
我读过很多关于动态添加字段集的博客和文章，但他们都提供了一个非常复杂的答案。我的要求并不复杂。
我的HTML代码：
< input type =textname =membervalue =>成员数目:(最多10个）< br />
< a href =＃id =filldetails>填写详细资料< / a>
所以，一个用户会输入一个整数值（我正在使用javascript检查验证） 输入字段。点击填充详细信息链接，将出现相应数量的输入栏以供输入。我想用javascript来实现这一点。
我不是一名职业选手。我在考虑如何通过链接检索用户在 input 字段中填入的整数并显示相应数量的输入字段。
<您可以使用
onclick 事件处理程序来获取文本字段的输入值。确保你给这个字段赋予一个唯一的 id 属性，这样你可以通过 document.getElementById（）安全地引用它： 如果您想动态添加元素，您应该有一个容器放置它们的位置。例如，< div id =container> 。通过 document.createElement（）创建新元素，并使用 appendChild（）将它们附加到容器。您可能有兴趣为每个动态输出一个有意义的名称属性（例如 name =member+ i >）生成< input> s如果要在表单中提交它们。
注意，您也可以创建< br /> 元素与 document.createElement（'br'）。如果你想输出一些文本，您可以使用 document.createTextNode（）代替。
hasChildNodes（）和 removeChild（）。 < html>
< head>
< script type ='text / javascript'>
函数addFields（）{
//创建
的输入数量var number = document.getElementById（member）。value;
// Container< div>动态内容将被放置
var conta iner = document.getElementById（container）;
//清除容器的前一个内容
while（container.hasChildNodes（））{
container.removeChild（container.lastChild）;
}
for（i = 0; i< number; i ++）{
//用随机文本追加节点
container.appendChild（document.createTextNode（Member +（i + 1）））;
//创建<输入>元素，设置其类型和名称属性
var input = document.createElement（input）;
input.type =text;
input.name =member+ i;
container.appendChild（input）;
//追加换行符
container.appendChild（document.createElement（br））;
}
}
< / script>
< / head>
< body>
< input type =textid =membername =membervalue =>成员数目:(最多10）< br />
< a href =＃id =filldetailsonclick =addFields（）>填充详细信息< / a>
< div id =container/>
< / body>
< / html>
查看 JSFiddle 。
I've read many blogs and posts on dynamically adding fieldsets, but they all give a very complicated answer. What I require is not that complicated.
My HTML Code:
<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>
So, a user will enter an integer value (I'm checking the validation using javascript) in the input field. And on clicking the Fill Details link, corresponding number of input fields will appear for him to enter. I want to achieve this using javascript.
I'm not a pro in javascript. I was thinking how can I retrieve the integer filled in by the user in input field through the link and displaying corresponding number of input fields.
You could use an onclick event handler in order to get the input value for the text field. Make sure you give the field an unique id attribute so you can refer to it safely through document.getElementById():
If you want to dynamically add elements, you should have a container where to place them. For instance, a <div id="container">. Create new elements by means of document.createElement(), and use appendChild() to append each of them to the container. You might be interested in outputting a meaningful name attribute (e.g. name="member"+i for each of the dynamically generated <input>s if they are to be submitted in a form.
Notice you could also create <br/> elements with document.createElement('br'). If you want to just output some text, you can use document.createTextNode() instead.
Also, if you want to clear the container every time it is about to be populated, you could use hasChildNodes() and removeChild() together.
<html>
<head>
<script type='text/javascript'>
function addFields(){
// Number of inputs to create
var number = document.getElementById("member").value;
// Container <div> where dynamic content will be placed
var container = document.getElementById("container");
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
// Append a node with a random text
container.appendChild(document.createTextNode("Member " + (i+1)));
// Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
<div id="container"/>
</body>
</html>
See a working sample in this JSFiddle.
这篇关于动态添加输入元素以形成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
