Динамически генерируемое поле формы теряет значение при добавлении нового поля - PullRequest
Новая
       5

Динамически генерируемое поле формы теряет значение при добавлении нового поля

2 голосов
/ 13 мая 2010

Я генерирую динамический набор полей с помощью JavaScript. Для добавления полей я использую следующую функцию (эта функция фактически добавляет более одного поля)

// добавить тест 

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>";
}

Я использую innerHTML вместо append, потому что есть много кода, который я должен добавить, разметка намного короче таким образом.

Теперь моя проблема в том, что всякий раз, когда я добавляю (или удаляю) поле, все данные из других динамически генерируемых данных будут потеряны. Как я могу это исправить? Сохранение значения, а затем добавление его в каждое поле было бы очень сложным в моем случае. Есть идеи?

1 Ответ

2 голосов
/ 13 мая 2010

Установка innerHTML родительского элемента вызывает сериализацию всего содержимого, а затем его повторный анализ, при этом все значения в процессе теряются (значения не сериализуются обратно в атрибуты значения). Я могу придумать три обходных пути:

  1. Создайте свой внешний div (testContainer), используя createElement, установите его innerHTML, а затем добавьте div в родительский элемент
  2. Создать все элементы, используя DOM. Создать набор вспомогательных функций, чтобы упростить создание элементов, - тривиально.
  3. Используйте jQuery, который сделает все это за вас: $(location).append('html goes here');
...