[英]Javascript?:How to dynamically add text inputs/form fields to a HTML form?
我正在构建一个Web表单,其中有一个输入列表。 到现在为止还挺好。
但是,如何添加链接/按钮以添加另外5个字段到列表中。 例如:
<input>
<input>
<input>
<input>
<a href="" onclick="">Add 10 more fields</a>
我在这个网站上查看了许多类似的q,但似乎没有人描述如何添加多个字段。
谢谢你的帮助,
哈雷
编辑:谢谢大家的帮助,看起来像jquery追加是要走的路。 但是我很欣赏不使用jquery的替代方案。
$("#anyDiv").html('<input id="id1"/>');
....
$("#anyDiv").append('<input id="id2"/>');
这是一个js小提琴,展示了使用jQuery的append()函数添加10个输入的示例。 我建议每次点击只做一次添加,就像在user1301840的例子中那样。
HTML
<div id="inputList"></div>
<input type="button" value="Add 10 Inputs" id="addInputs" />
使用Javascript
$('#addInputs').click(function() {
for (i = 0; i < 10; i++) {
$('#inputList').append('<input type="text" />');
}
});
虽然你已经有了答案,但我想我会尝试提供一个非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);
});
}
JS小提琴演示 。
我没有IE测试,但上面应该使用attachEvent
后退的IE <9,而我认为> = 9实现标准的addEventListener()
。
参考文献:
尝试使用JQuery .append()函数
$("a").click(function(e){
$("form").append("<input />");
})
是的,jquery是去这里的方式。
$("<input type='text'>").appendTo("#someContainer");
祝好运。
以下示例在单击链接时添加输入框:
<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.