クリック時に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++; 
} 

をお試しください10