动态添加输入元素到表单 [英] Adding input elements dynamically to form
问题描述
我已经阅读了许多关于动态添加字段集的博客和帖子，但它们都给出了一个非常复杂的答案.我需要的不是那么复杂.
我的 HTML 代码:
<input type="text" name="member" value="">成员数量:(最多 10 个)<br/><a href="#" id="filldetails">填写详情</a>因此，用户将在 input 字段中输入一个整数值(我正在使用 javascript 检查验证).而在点击Fill Details 链接时，会出现相应数量的输入字段供他输入.我想使用 javascript 来实现这一点.
我不是 JavaScript 专家.我在想如何通过链接检索用户在 input 字段中填写的整数并显示相应数量的输入字段.
您可以使用 onclick 事件处理程序来获取文本字段的输入值.确保为该字段提供唯一的 id 属性，以便您可以通过 document.getElementById() 安全地引用它:
如果你想动态添加元素，你应该有一个容器来放置它们.例如，
document.createElement() 创建新元素，并使用appendChild() 将每个元素追加到容器中.您可能有兴趣输出一个有意义的 name 属性(例如 name=member"+i 用于每个动态生成的 请注意，您还可以使用 document.createElement('br') 创建 <br/> 元素.如果你只想输出一些文本，你可以使用 document.createTextNode() 代替.
此外，如果您想在每次即将填充时清除容器，您可以一起使用 hasChildNodes() 和 removeChild().
<头><script type='text/javascript'>函数 addFields(){//要创建的输入数var number = document.getElementById("member").value;//容器 将放置动态内容的位置var container = document.getElementById("container");//清除容器之前的内容而 (container.hasChildNodes()) {container.removeChild(container.lastChild);}for (i=0;i<身体><input type="text" id="member" name="member" value="">会员人数:(最多10人)<br/><a href="#" id="filldetails" onclick="addFields()">填写详情</a><div id="容器"/></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屋！
