нажатие кнопки снова делает сброс поля

Question

Когда я нажимаю кнопку добавления, это заставляет предыдущее значение исчезать. Пример, если я щелкнул первый раз и введите значения в первые поля ввода. и нажмите кнопку Добавить это делает предыдущие значения исчезают из поля ввода

function addInput(event) { 
 
    var field = 
 
     '<div class="form-group"><input type="text" class="form-control" name="selected_text" placeholder="Selected Text"></div>' + 
 
     '<div class="form-group"><input type="text" class="form-control" name="selected_route_url" placeholder="Route Url for selected text"></div>' + 
 
     '<div class="form-group"><input type="text" class="form-control" name="unselected_text" placeholder="UnSelected Text"></div>' + 
 
     '<div class="form-group"><input type="text" class="form-control" name="unselected_route_url" placeholder="Route Url for unselected text"></div>' 
 
    document.getElementById('inputField').innerHTML += field; 
 
    event.preventDefault(); 
 
    }

<div class="form-group"> 
 
    <a class="btn btn-primary pull-left" onclick="addInput(event)">Add</a> 
 
</div> 
 
<div id="inputField" style="background-color:#eceff1;"> 
 
</div>

Answer 1

Добавление элементов в innerHTML перезагружает весь элемент заранее. Вот почему значения сбрасываются.

Вы можете попробовать использовать функцию insertAdjacentHTML. Затем эта линия

document.getElementById('inputField').innerHTML += field; 

станет это

document.getElementById('inputField').insertAdjacentHTML('beforeend', field); 

Отрывок:

function addInput(event) { 
 
    var field = 
 
     '<div class="form-group"><input type="text" class="form-control" name="selected_text" placeholder="Selected Text"></div>' + 
 
     '<div class="form-group"><input type="text" class="form-control" name="selected_route_url" placeholder="Route Url for selected text"></div>' + 
 
     '<div class="form-group"><input type="text" class="form-control" name="unselected_text" placeholder="UnSelected Text"></div>' + 
 
     '<div class="form-group"><input type="text" class="form-control" name="unselected_route_url" placeholder="Route Url for unselected text"></div>' 
 
    document.getElementById('inputField').insertAdjacentHTML('beforeend', field); 
 
    event.preventDefault(); 
 
    }

<div class="form-group"> 
 
    <a class="btn btn-primary pull-left" onclick="addInput(event)">Add</a> 
 
</div> 
 
<div id="inputField" style="background-color:#eceff1;"> 
 
</div>

Источник: this similar answer

Answer 2

Я полностью преобразовал программу для JQuery и его работы ..

$("#link").click(function() { 
    var field = 
    '<div class="form-group"><input type="text" class="form-control" name="selected_text" placeholder="Selected Text"></div>' + 
    '<div class="form-group"><input type="text" class="form-control" name="selected_route_url" placeholder="Route Url for selected text"></div>' + 
    '<div class="form-group"><input type="text" class="form-control" name="unselected_text" placeholder="UnSelected Text"></div>' + 
    '<div class="form-group"><input type="text" class="form-control" name="unselected_route_url" placeholder="Route Url for unselected text"></div>'; 
    $('#inputField').append(field); 
    event.preventDefault(); 

}); 

HTML

<div class="form-group"> 
    <a class="btn btn-primary pull-left" id="link">Add</a> 
</div> 
<div id="inputField" style="background-color:#eceff1;"> 
</div> 

Fiddle