xan*_*xan 72 html javascript forms
我已经阅读了很多关于动态添加字段集的博客和帖子,但它们都给出了一个非常复杂的答案.我需要的并不是那么复杂.
我的HTML代码:
<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>
因此,用户将在input字段中输入一个整数值(我正在使用javascript检查验证).点击Fill Details链接后,将显示相应数量的输入字段供他输入.我想用javascript实现这一点.
我不是javascript的专家.我在想如何input通过链接检索用户在字段中填写的整数,并显示相应数量的输入字段.
Xav*_*ica 132
您可以使用onclick事件处理程序来获取文本字段的输入值.确保为该字段指定一个唯一id属性,以便您可以通过document.getElementById()以下方式安全地引用该字段:
如果要动态添加元素,则应该有一个容器放置它们.例如,a <div id="container">.通过以下方式创建新元素document.createElement(),并使用appendChild()它们将每个元素附加到容器中.您可能对输出有意义的name属性感兴趣(例如,name="member"+i对于每个动态生成的<input>s,如果要在表单中提交它们).
请注意,您也可以创建<br/>元素document.createElement('br').如果您只想输出一些文本,可以document.createTextNode()改用.
另外,如果你想每次即将被填充时间来清除容器,你可以使用hasChildNodes()和removeChild()在一起.
<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>
请参阅此JSFiddle中的工作示例.
小智 19
尝试使用此JQuery代码动态包含表单,字段和删除/删除行为:
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
<button class="add_form_field">Add New Field
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<div><input type="text" name="mytext[]"></div>
</div>| 归档时间： |
|
| 查看次数： |
352111 次 |
| 最近记录： |