Question

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

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

Answer 1

因为每次你覆盖容器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)
}

演示：Fiddle

我的javascript添加了更多的输入字段，文本字段中的值不会保留

1 个答案: