[英]Javascript?:How to dynamically add text inputs/form fields to a HTML form?
I am building a web form where there is a list of inputs. 我正在构建一个Web表单,其中有一个输入列表。 So far, so good.
到现在为止还挺好。
However, how can I add a link/button to add say another 5 fields to the list. 但是,如何添加链接/按钮以添加另外5个字段到列表中。 eg:
例如:
<input>
<input>
<input>
<input>
<a href="" onclick="">Add 10 more fields</a>
I have looked through many similar q's on this site, however none seem to describe how to add multiple fields. 我在这个网站上查看了许多类似的q,但似乎没有人描述如何添加多个字段。
Thanks for any help, 谢谢你的帮助,
Harley 哈雷
EDIT: Thanks all for help, looks like jquery append is the way to go. 编辑:谢谢大家的帮助,看起来像jquery追加是要走的路。 However I appreciate the alternative that does not use jquery.
但是我很欣赏不使用jquery的替代方案。
$("#anyDiv").html('<input id="id1"/>');
....
$("#anyDiv").append('<input id="id2"/>');
Here's a js fiddle showing the example of adding 10 inputs using jQuery's append() function. 这是一个js小提琴,展示了使用jQuery的append()函数添加10个输入的示例。 I suggest only doing one addition per click as in user1301840's example though.
我建议每次点击只做一次添加,就像在user1301840的例子中那样。
HTML HTML
<div id="inputList"></div>
<input type="button" value="Add 10 Inputs" id="addInputs" />
Javascript 使用Javascript
$('#addInputs').click(function() {
for (i = 0; i < 10; i++) {
$('#inputList').append('<input type="text" />');
}
});
While you already have answers, I thought I'd try and provide a non-jQuery solution: 虽然你已经有了答案,但我想我会尝试提供一个非jQuery解决方案:
function addInput(insertAt, formEl, num, inputType, defaultVal) {
console.log(formEl);
if (!formEl) {
return false;
}
else {
num = num ? num : 5;
var fieldset = document.createElement('fieldset'),
newInput;
for (var i = 0; i < num; i++) {
newInput = document.createElement('input');
newInput.value = defaultVal || '';
newInput.type = inputType || 'text';
fieldset.appendChild(newInput);
}
formEl.insertBefore(fieldset, insertAt);
}
}
var formEl = document.getElementById('theForm'),
aElem = document.getElementById('aElement');
if (window.addEventListener) {
// up to date browsers
aElement.addEventListener('click', function() {
addInput(this, formEl, 10);
}, false);
} else if (window.attachEvent) {
// legacy IE, <9
aElement.attachEvent('onclick', function() {
addInput(this, formEl);
});
}
I don't have IE to test, but the above should work with IE < 9 using the attachEvent
fall-back, and >= 9, I think, implements the standard addEventListener()
. 我没有IE测试,但上面应该使用
attachEvent
后退的IE <9,而我认为> = 9实现标准的addEventListener()
。
References: 参考文献:
Yep, jquery is the way to go here. 是的,jquery是去这里的方式。
$("<input type='text'>").appendTo("#someContainer");
Good luck. 祝好运。
The following example add input box at click a link: 以下示例在单击链接时添加输入框:
<div id="start">
<input/><br/><br/>
</div>
<a href="#" id="box">Add more fields</a>
$("#box").click(function(){
var add="";
add+='<input/>'+'<br/>'+'</br/>';
$("#start").append(add);
});
<script type='text/javascript'>
var counter = 1;
var limit = 3;
function addInput(divName) {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<br><input type='text' name='myInputs" + counter + "'> <input type='text' name='myInputs" + counter + "'> <select><option value='88888'>888888888</option></select>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
</script>
<form method="POST">
<div id="dynamicInput">
<input type="button" value="Add another text input" onclick="addInput('dynamicInput');">
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.