我正在制作HTML表单,用户有不同的选项。我试图创建一个按钮,它可以无限制地生成一个新的名称增加的操作输入字段,如: 第一个生成的输入应该有一个名称为input1的输入。下一个名称为input2等等。JavaScript在点击时生成新的输入字段
这里是一个可视化例子:https://webmshare.com/ZBvw0
这又如何实现呢?
我正在制作HTML表单,用户有不同的选项。我试图创建一个按钮,它可以无限制地生成一个新的名称增加的操作输入字段,如: 第一个生成的输入应该有一个名称为input1的输入。下一个名称为input2等等。JavaScript在点击时生成新的输入字段
这里是一个可视化例子:https://webmshare.com/ZBvw0
这又如何实现呢?
您可以通过动态创建表单元素并将它们附加到您的form
元素来解决此问题。
下面是一个简单的例子,只是为了展示主要想法。这里
要点是:
Document.createElement() - 它创建了一个指定的HTML元素(在这种情况下你的表单元素)。
Node.appendChild() - 将一个节点添加到指定父节点(您的表单元素)的子节点列表的末尾。
(function() {
var counter = 0;
var btn = document.getElementById('btn');
var form = document.getElementById('form');
var addInput = function() {
counter++;
var input = document.createElement("input");
input.id = 'input-' + counter;
input.type = 'text';
input.name = 'name';
input.placeholder = 'Input number ' + counter;
form.appendChild(input);
};
btn.addEventListener('click', function() {
addInput();
}.bind(this));
})();
input{
display: block;
}
<form id="form" action="">
</form>
<button id="btn" type="button">Click Me!</button>
我不知道“var template”应该做什么? –
它仍然不是我正在寻找的东西。正如我在问题中所说的,我需要创建一组输入,而不仅仅是一个输入。像Joshua提供的答案将是完美的,除了它删除了以前的输入数据。 –
@SkinFlipNetwork在函数addInput中,您可以通过简单地使用'document.createElement()'(您可以创建任何类型的DOM元素)来添加任何元素 – GibboK
您可以使用jquery获取last项目的名称。
然后,您可以使用javascript string replace方法并用''替换'输入'以获取最后一个项目的编号。
然后只需增加1即可。在添加1之前,您必须先登录parse it as an integer。
然后用增加的数字创建一个新的输入字段并将append it添加到您的容器中。
试试这个
HTML
<div id="demo">
</div>
<input type="button" id="add" value="Add input"/>
的Javascript
var num = 1;
document.getElementById('add').addEventListener("click",addInput);
function addInput(){
var demo = document.getElementById('demo');
demo.insertAdjacentHTML('beforeend','<div class="form-holder" style="width: 30%;"><a class="form-label">Billet type</a> <br><select name="ttype'+num+'"><option value="normal">Standard Billet</option><option value="add-on">Tilkøbs Billet</option></select></div><div class="form-holder" style="width: 31%; margin-left: 0.6%;"><a class="form-label">Billet navn</a> <br><input name="tname'+num+'" type="text" placeholder="F.eks. Entré Billet" style="width: 100%;" /></div><div class="form-holder" style="float: right; width: 18%; margin-left: 1%;"><a class="form-label">Antal</a> <br><input name="tquan'+num+'" type="text" placeholder="F.eks. 500" style="width: 100%;" /></div><div class="form-holder" style="float: right; width: 18%;"><a class="form-label">Pris (DKK)</a> <br><input name="tprice'+num+'" type="text" placeholder="F.eks. 100" style="width: 100%;" /></div> <br>');
num++;
}
欢迎来到SO!你试过什么了? – GibboK