使用javascript保留文本字段的值

Question

I build a little snippet with javascript to add more fields by clicking a button. It works fine and add the field as it should but it discards the values of the already existing fields on clicking the add more button.

You can run the snippet below to check the issue ... Please add 2-3 fields and type something in those fields and then add another field. You'll see what is happening.

 var fldsContainer = document.getElementById('fields'); var fld = '<p><input name="test[]" type="text"></p>'; function addField() { fldsContainer.innerHTML += fld; } 

 <div id="fields"></div> <button onclick="addField()">Add More Field</button> 

I know in jQuery we can simply .append() but I need a solution in javascript. Is there append method in javascript?

Or any other method to resolve my issue would be appreciated :)

Answer 1

It is because the content of fldsContainer is rerendered every time with a brand new list of fields. You need to append to the container. Try something like the insertAdjacentHTML() method.

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

 var fldsContainer = document.getElementById('fields'); var fld = '<p><input name="test[]" type="text"></p>'; function addField() { fldsContainer.insertAdjacentHTML('beforeend', fld); } 

 <div id="fields"></div> <button onclick="addField()">Add More Field</button> 

Answer 2

It may seem larger and maybe overkill but i prefer tracking all my inputs into an array so that i separate myself from needing to possibly query DOM elements in future.

 var fldsContainer = document.getElementById('fields'); var fields = []; function render() { fldsContainer.innerHTML = getFields(); } function addField() { fields.push(fields.length ? getField(fields.length) : getField(0)); render(); } function setValue(input, i) { fields[i].value = input.value; } function getFields() { var str = '' fields.forEach(function(field) { str += (`<p><input name="${field.name}" value="${field.value}" type="text" onchange="setValue(this, ${field.index})"></p>`); }); return str; } function getField(index) { return { index, name: `test${index}`, value: '' } } 

 <div id="fields"></div> <button onclick="addField()">Add More Field</button>