Benjamin Benjamin - 7 months ago 11
HTML Question

How do I add dynamic form elements but keep their values (JS)

How do I simply add dynamic form elements but keep their values? on adding an input using my current method it doesn't pass any info typed into the fields (deleted existing: see fiddle at the bottom) I think the problem is how I am adding the new inputs

document.getElementById("add_ac").innerHTML += str;


I have found other ways of adding dynamic form elements but they seem overly complicated does anyone know a very simple way of fixing the problem?

If you can't tell I don't code with JS or backend often, really just looking for a clean simple solution. Have looked on google and stack.

Any real help would be great!

<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 fiddle: https://jsfiddle.net/fsdbpxoo/

Answer

Use insertAdjacentHTML as innerHTML += will reinsert all the DOM in the container.

insertAdjacentHTML() parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on and thus it does not corrupt the existing elements inside the element. This, and avoiding the extra step of serialization make it much faster than direct innerHTML manipulation.

Position "'beforeend'": Just inside the element, after its last child.

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>