clicking the button again making the field reset

Question

When ever i click the add button it makes the previous value disappear. Example if i click add first time and enter the values in the first input boxes. and the click the add button it is making the previous values disappear from the input boxes

  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>

score 3 · Answer 1 · edited May 23 '17 at 11:52

Adding elements to innerHTML reloads the entire element beforehand. That's why the values get reset.

You could try using the insertAdjacentHTML function. Then this line

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

will become this

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

Snippet :

  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>

Source : this similar answer

score 1 · Answer 2 · answered Jul 01 '16 at 08:24

I totally converted the program to jquery and its working..

 $("#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

clicking the button again making the field reset

2 Answers2