JavaScript在點擊時生成新的輸入字段

Question

我正在製作HTML表單，用戶有不同的選項。我試圖創建一個按鈕，它可以無限制地生成一個新的名稱增加的操作輸入字段，如： 第一個生成的輸入應該有一個名稱爲input1的輸入。下一個名稱爲input2等等。

這裏是一個可視化例子：https://webmshare.com/ZBvw0

這又如何實現呢？

Answer 1

您可以通過動態創建表單元素並將它們附加到您的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>

Answer 2

您可以使用jquery獲取last項目的名稱。

然後，您可以使用javascript string replace方法並用''替換'輸入'以獲取最後一個項目的編號。

然後只需增加1即可。在添加1之前，您必須先登錄parse it as an integer。

然後用增加的數字創建一個新的輸入字段並將append it添加到您的容器中。

Answer 3

試試這個

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++; 
} 

退房jsFiddle example