JavaScript генерировать новое поле ввода при нажатии

Question

Я в процессе создания HTML-формы, где пользователи имеют разные варианты. Я пытаюсь сделать кнопку, которая бесконечно генерирует новые поля ввода ввода op с увеличением имени, например: Первый сгенерированный ввод должен иметь имя 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 и заменить 'input' на '', чтобы получить номер последнего элемента.

Затем просто увеличьте его на 1. Вам нужно будет parse it as an integer перед добавлением 1 к нему.

Затем с увеличивающимся номером создайте новое поле ввода и 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