動的フォーム要素を追加しても値を保持する方法（JS）

Question

どうすれば動的フォーム要素をに追加するだけですか？私の現在の方法を使用して入力を追加すると、フィールドに入力された情報が渡されません（既存のフィールドが削除されています：下のfiddleを参照してください）。動的なフォーム要素を追加する方法はあまりにも複雑に見えますが、誰もが問題を解決する非常に簡単な方法を知っていますか？

JSやバックエンドでコードを頻繁に記述しないと言うことができない場合は、単純できれいなソリューションを探してください。 Googleとスタックを見てきました。

本当の助けがあれば助かります。

<div id="add_ac"> 
    <input type="text" name="c[]" placeholder="Add comment..."/><br /> 
</div> 
<button id="add_ac_btn">+</button> 

<div id="add_ai"> 
    <input type="text" name="tai[]" placeholder="Add triggers, separated by commas"/> <input type="text" name="cai[]" placeholder="Add comment..."/><br /> 
</div> 
<button id="add_ai_btn">+</button> 

JSフィドル

document.getElementById('add_ac_btn').onclick = function add_new_ac(){ 
    var str = '<input type="text" name="c[]" placeholder="Add comment..."/><br />'; 
    document.getElementById("add_ac").innerHTML += str; 
} 

document.getElementById('add_ai_btn').onclick = function add_new_ai(){ 
var str = '<input type="text" name="tai[]" placeholder="Add triggers, separated by commas"/> <input type="text" name="cai[]" placeholder="Add comment..."/><br />'; 
document.getElementById("add_ai").innerHTML += str; 


} 

JS：https://jsfiddle.net/fsdbpxoo/

Answer 1

insertAdjacentHTMLをinnerHTML +=として使用すると、容器内のすべてのDOMが再挿入されます。

insertAdjacentHTML()は、指定されたテキストをHTMLまたはXMLとして解析し、結果のノードを指定された位置のDOMツリーに挿入します。それが使用されている要素を再解析しないので、要素内の既存の要素が破損することはありません。これにより、直列化の余分なステップを避けて、直接innerHTML操作よりもずっと速くなります。

ポジション" 'beforeend'"：ただ、要素内の、その最後の子の後。

document.getElementById('add_ac_btn').onclick = function add_new_ac() { 
 
    var str = '<input type="text" name="c[]" placeholder="Add comment..."/><br />'; 
 
    document.getElementById("add_ac").insertAdjacentHTML("beforeend", str); 
 
} 
 
document.getElementById('add_ai_btn').onclick = function add_new_ac() { 
 
    var str = '<input type="text" name="tai[]" placeholder="Add triggers, separated by commas"/> <input type="text" name="cai[]" placeholder="Add comment..."/><br />'; 
 
    document.getElementById("add_ai").insertAdjacentHTML("beforeend", str); 
 
}

<div id="add_ac"> 
 
    <input type="text" name="c[]" placeholder="Add comment..." /> 
 
    <br /> 
 
</div> 
 
<button id="add_ac_btn">+</button> 
 
<div id="add_ai"> 
 
    <input type="text" name="tai[]" placeholder="Add triggers, separated by commas" /> 
 
    <input type="text" name="cai[]" placeholder="Add comment..." /> 
 
    <br /> 
 
</div> 
 
<button id="add_ai_btn">+</button>

Answer 2

あなただけではなく、完全なコンテンツを置き換えるの新しい要素を追加する必要があります。そのため.appendChild()機能を使用します。

document.getElementById('add_ac_btn').onclick = function add_new_ac() { 
 
    var wrapper = document.getElementById('add_ac'); 
 

 
    var newInput = document.createElement('input'); 
 
    newInput.type = 'text'; 
 
    newInput.name = 'c[]'; 
 
    newInput.placeholder = 'Add comment...'; 
 
    wrapper.appendChild(newInput); 
 

 
    wrapper.appendChild(document.createElement('br')); 
 
} 
 

 

 

 
document.getElementById('add_ai_btn').onclick = function add_new_ac() { 
 
    var wrapper = document.getElementById('add_ai'); 
 

 
    var newInput = document.createElement('input'); 
 
    newInput.type = 'text'; 
 
    newInput.name = 'tai[]'; 
 
    newInput.placeholder = 'Add triggers, separated by commas'; 
 
    wrapper.appendChild(newInput); 
 

 
    var newInput = document.createElement('input'); 
 
    newInput.type = 'text'; 
 
    newInput.name = 'cai[]'; 
 
    newInput.placeholder = 'Add comment...'; 
 
    wrapper.appendChild(newInput); 
 

 
    wrapper.appendChild(document.createElement('br')); 
 
}

<div id="add_ac"> 
 
    <input type="text" name="c[]" placeholder="Add comment..." /> 
 
    <br /> 
 
</div> 
 
<button id="add_ac_btn">+</button> 
 

 
<div id="add_ai"> 
 
    <input type="text" name="tai[]" placeholder="Add triggers, separated by commas" /> 
 
    <input type="text" name="cai[]" placeholder="Add comment..." /> 
 
    <br /> 
 
</div> 
 
<button id="add_ai_btn">+</button>

Answer 3

あなたはjQueryのAPPEND（）メソッドを使用してみたりバニラJSの道を行くし、それを追加するには、appendChild（）を使用し、その後、ノードを構築する必要があります。

Answer 4

ありこんにちはフォーム要素を複製し、親ノードに挿入するために、cloneメソッドを使用します。あなたのコードを変更しました...

HTML

<div id="add_ac"> 
    <div id="duplicater"> 
    <input type="text" name="c[]" placeholder="Add comment..."/> 
    </div> 
</div> 
<button id="add_ac_btn">+</button> 

<div id="add_ai"> 
    <div id="duplicetorSec"> 
    <input type="text" name="tai[]" placeholder="Add triggers, separated by commas"/> 
    <input type="text" name="cai[]" placeholder="Add comment..."/> 
    </div> 
</div> 
<button id="add_ai_btn">+</button> 

JSコード：

<script> 
var i = 0; 
var k = 0; 
var original = document.getElementById('duplicater'); 
var originalSec = document.getElementById('duplicetorSec'); 

function duplicate(){ 
    var clone = original.cloneNode(true); // "deep" clone 
    i = ++i; 
    clone.id = "duplicetor"+ i; // there can only be one element with an ID 
    original.parentNode.appendChild(clone); 
    clearCloneElement(clone.id); 
} 
function duplicateSec(){ 
    var clone = originalSec.cloneNode(true); // "deep" clone 
    console.log(clone); 
    k = ++k; 
    clone.id = "duplicetorSec"+ k; // there can only be one element with an ID 
    originalSec.parentNode.appendChild(clone); 
    clearCloneElement(clone.id); 
} 
function clearCloneElement(id){ 
    var divId = '#'+id; 
    $(divId).find("input[type^='text']").each(function() { 
    $(this).val(''); 
    }); 
} 
document.getElementById('add_ac_btn').onclick = function add_new_ac(){ 
    duplicate(); 
} 
document.getElementById('add_ai_btn').onclick = function add_new_ac(){ 
    duplicateSec(); 
} 
</script> 

here demo

をご覧下さいページのヘッダーでjQueryのファイル