Javascript InnerHTML Erases Data In Form Elements

Question

I have this form with a button that allows you to add fields to the form.

Answer 1

The value attribute of the HTML element is not updated to reflect the current value of the input element... see this related question

You can avoid using the innerHTML property entirely by using createElement and appendChild.

Instead of:

d.innerHTML+='
Answer: 
';

You can try:

var li = document.createElement('li');
li.for = y;
li.innerHTML = 'Answer:'

var input = document.createElement('input');
input.name=y;
input.id = y;
input.size=66;

d.appendChild(li);
d.appendChild(input);