Добавьте к HTML-форме, не теряя текущую информацию о входе формы в JavaScript
У меня есть выпадающее, которое создает форму, базирующуюся выборов, которые выбраны. Так, если кто-то выбирает 'foobar', он отображает текстовое поле, если они выбирают 'сыр', он отображает переключатели. Пользователь может затем ввести данные в эти формы, как они продвигаются. Единственная проблема состоит в том, что, когда они добавляют новый элемент формы, вся остальная часть информации стирается. Я в настоящее время использую следующее, чтобы сделать, добавляют к форме:
document.getElementById('theform_div').innerHTML =
document.getElementById('theform_div').innerHTML + 'this is the new stuff';
Как я могу заставить это сохранять то независимо от того, что имеет быть enetered в форме и также добавить новое поле в конец?
5 ответов
Настройка innerHTML разрушает содержание элемента и восстанавливает его от HTML.
Необходимо построить отдельное дерево DOM и добавить его путем вызова appendChild .
Например,
var container = document.createElement("div");
container.innerHTML = "...";
document.getElementById("theform_div").appendChild(container);
Это намного проще сделать с помощью jQuery .
Шаг первый:
Добавить jQuery к заголовкам:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
Шаг второй:
Добавить, не заменять, данные к DIV следующим образом:
$("#theform_div").append("your_new_html_goes_here");
Не используйте innerHTML для создания элементов формы. С помощью innerHTML вы перезаписываете старый HTML новым HTML, который воссоздает все элементы. Вместо этого вам нужно использовать DOM для создания и добавления элементов.
ПРИМЕР
function addRadioElement()
{
var frm = document.getElementById("form_container");
var newEl = document.createElement("input");
newEl.type = "radio";
newEl.name = "foo";
newEl.value = "bar";
frm.appendChild(newEl);
}
Наиболее правильным способом сделать это без использования фреймворка (например, jQuery, Dojo, YUI) является:
var text = document.createTextNode('The text you want to write');
var div = document.createElement('div');
div.appendChild(text);
document.getElementById('theform_div').appendChild(div);
innerHTML, хотя и поддерживается большинством браузеров, не является стандартным и, следовательно, не гарантированно работает.