我在添加更多输入字段时遇到问题，文本字段中的值不会保留

I have trouble with my javascript with add more input fields, values inside text fields won't retain

本文关键字：字段 文本 保留 遇到 添加 输入 问题      更新时间：2023-09-26
 <div id="addmore">
    <ul class="jcform" id="countme">
        <li><strong>Criteria Name</strong></li>
        <li><strong>Points</strong></li>
        <li>&nbsp;</li>
    </ul>
    <ul class="jcform" id="countme">
        <li><input class="form-control" name="cname[]" type="text"/></li>
        <li><input class="form-control" name="cpoints[]" type="text"/>  </li>
        <li>&nbsp;</li>
    </ul>
 </div>
 <input class="btn btn-primary" type="button" onclick="addmore()" value="+ add more field" />

我有上面的代码和javascript：

function removeme(numm) {
    document.getElementById('remove'+numm+'').style.display = 'none';
      } 
function addmore() {    
    var top_level_div = document.getElementById('addmore');
    var count = top_level_div.getElementsByTagName('ul').length;        
    var tbl1 = '<ul class="jcform" id="remove'+count+'" style="display:block">
    <li>
        <input class="form-control" id="field1" name="cname[]" type="text" value=""/>
    </li>
    <li>
        <input class="form-control" id="fieldpoints1" name="cpoints[]" type="text" value=""/>
    </li>
    <li><a href="#" class="btn btn-warning" onclick="removeme('+count+')">Removed</a>
    </li></ul>';    
    document.getElementById('addmore').innerHTML += tbl1    
 }

我的问题是，当我在文本字段中输入值，然后单击"添加更多字段"按钮添加更多输入字段时，我输入的文本字段的值将不会保留，我必须再次键入。我不知道为什么。有人可以告诉我为什么吗？以及如何在单击"添加更多"按钮时保留文本字段中的值。谢谢。

因为每次您重写容器html替换现有元素时

function addmore() {
    var top_level_div = document.getElementById('addmore');
    var count = top_level_div.getElementsByTagName('ul').length;
    var ul = document.createElement('ul');
    ul.className = 'jcform';
    ul.id = 'remove' + count;
    var tbl1 = '<li><input class="form-control" id="field1" name="cname[]" type="text" value=""/></li>  <li><input class="form-control" id="fieldpoints1" name="cpoints[]" type="text" value=""/></li><li><a href="#" class="btn btn-warning" onclick="removeme(' + count + ')">Removed</a></li>';
    ul.innerHTML = tbl1;
    document.getElementById('addmore').appendChild(ul)
}

演示：小提琴

相关文章：