Question

I using an HTML / Javascript combination to add fields dynamically.

Here is the jsfiddle for it: http://jsfiddle.net/kM9Yg/2/

My problem is, if I input values in a field, and then click on the Add More button, a new field gets added but the previous fields’ values get reset.

The button to add more is of type <input type="button"/> and not <input type="reset" />

Any way to prevent this?

Answer 1

Use DOM methods, not innerHTML. DOM methods are standardised, innerHTML is not. Some browsers will reflect the current value as the default value, others will not.

You can do:

var el, oEl = document.getElementById('divToClone');
if (oEl) {
  el = oEl.cloneNode(true);
  // code here to fix duplicate ids and
  // set style.display = '' so it's visible

  oEl.parentNode.appendChild(el);
}