Dynamically generated form field loses value when new field is added

问题

I am generating a dynamic fieldset with javascript. For adding fields, I use the following function (this function actually adds more than one field)

//add test

function addTest() {
    var location = document.getElementById('addTestLocation');
    var num = document.getElementById('addTestCount');
    var newnum = (document.getElementById('addTestCount').value -1)+ 2;
    num.value = newnum;
    location.innerHTML += "<div id='testContainer_"+newnum+"'><label for='test_"+newnum+"'>Test name: </label><input type='text' name='test_"+newnum+"' id='test_"+newnum+"'/>&nbsp;&nbsp;&nbsp;<a href='javascript: removeTest("+newnum+")'>- Remove test</a><br/><br/><span id='addObjectLocation'></span><br/><select id='select_"+newnum+"'><option>True or False</option><option>Single choice</option><option>Multiple choice</option><option>Short definition</option><option>Fill in the blanks</option></select><input type='hidden' id='addObjectCount' value='0'/>&nbsp;&nbsp;&nbsp;<a href='javascript:addObject();'>+ add question</a><br/><br/><hr/><br/></div>";
}

I use innerHTML instead of append because there is a lot of code i'd have to append, the markup is so much shorter this way.

Now, my problem is that whenever I add (or remove) a field, all the data from the other dynamically generated data would be lost. How can I fix this? Saving the value and then adding it to every field would be again, very complicated in my case. Any ideas?

回答1:

Setting the innerHTML of the parent element causes the entire content to be serialized and then re-parsed, losing all the values in the process (the values aren't serialized back into value attributes). I can think of three workarounds:

Create your outer div (the testContainer) using createElement, set its innerHTML and then append the div into the parent element
Create all the elements using DOM. It's trivial to create a bunch of helper functions to make creating the elements easier.
Use jQuery which does all this for you: $(location).append('html goes here');

来源：https://stackoverflow.com/questions/2826816/dynamically-generated-form-field-loses-value-when-new-field-is-added

标签

javascript

html

dom

dynamic-forms