Здравствуйте, мне необходимо сделать так, чтобы при клике на кнопке с определённым идентификатором в форму добавлялись дополнительные поля. Такой код у меня на данный момент:
<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>
Первая функция проверяет установлен ли чекбокс и соответственно показывает контейнер с полями (по ней тоже хотелось бы получить замечания), а вторая добавляет новые поля, но не могу разобраться, почему добавление поля происходит только один раз?