Задать вопрос
@ingenerdsm

Как добавить дополнительные поля в форму по клику на javascript?

Здравствуйте, мне необходимо сделать так, чтобы при клике на кнопке с определённым идентификатором в форму добавлялись дополнительные поля. Такой код у меня на данный момент:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<body>

<form name="my_form">
	<div id="take_value"><input id="my_check" name="my_check" type="checkbox">Учесть доп. параметр</div>
	<fieldset id="my_field" style="display:none;">
		<legend>Введите значение:</legend>
			<div class="my_block">
				<label>Значение №1:</label>
				<input type="text" size="10" class="val" name="val" value="1,0" />
			</div>
		<input id="addnew" type="button" value="добавить ещё"/>
	</fieldset>
</form>

<script type="text/javascript">
/*Определяем установлен ли чекбокс, если "да", показываем контейнер*/
document.forms[0].my_check.onclick = function detect(){
if (this.checked) {
document.getElementById("my_field").style.display = "block";
}
else document.getElementById("my_field").style.display = "none";
} 

/*При клике на кнопке с id=addnew вставляем HTML-код в контейнер id=my_field*/
document.getElementById("addnew").onclick = function (){
document.getElementById("my_field").innerHTML += "<div class=\"my_block\"><label>Значение:</label><input type=\"text\" class=\"val\" name=\"val\" value=\"1,0\" /></div>";
}
</script>

</body>
</html>


Первая функция проверяет установлен ли чекбокс и соответственно показывает контейнер с полями (по ней тоже хотелось бы получить замечания), а вторая добавляет новые поля, но не могу разобраться, почему добавление поля происходит только один раз?
  • Вопрос задан
  • 901 просмотр
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@choupa
Архитектор (обычный, который строит)
Когда вы используете присвоение значения innerHTML (даже через +=) вы полностью заменяете html-содержимое на новое. При этом обработчик, который вы повесили на кнопку id=addnew слетает. Это уже не "та" кнопка с обработчиком, а новая такая же, но уже без обработчика.

Надо использовать appendChild.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@denis95
автоматизирую ваш бизнес.
напишу программу.
разработаю, создам, внедрю, доработаю.
есть опыт разработки различных скриптов - ботов автоматизации для таких сервисов как : loveplanet, gmail, badoo, topface, vk, ok ru, mamba, mail ru, telegram.
владею javascript, node.js , ajax, html, css.
-довольные заказчики!
- оказываю тех-поддержку по созданным продуктам!
-всегда на связи !
-оперативная и бесплатная консультация
-не дорого и быстро реализую вашу идею
ТЕЛЕГРАМ jsmos
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы