Форум PHP программистов

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Evlampidii

23.02.2014 - 15:43

Господа, поздравляю Вас с праздником защитника Отечества! Желаю здоровья, интересных идей и массу возможностей реализовать их!

Ребят, пожалуйста помогите дополнить код на JS. Я делаю калькулятор, в котором в том числе учитывается площадь окон. В приведенном ниже коде, при положительном ответе пользователя на вопрос имеются ли окна в помещении, открываются поля для указания размеров окна. Далее в php обрабатываются введенные значения $_POST ['sh_okn'] и $_POST ['vs_okn'].

Проблема заключается в том что окон в помещении может быть несколько. Подскажите пожалуйста, как это можно реализовать. Например при ответе на вопрос имеются ли окна "Да", появлялось поле для указания количества окон. Далее, без перезагрузки страницы, появлялись поля для ввода, соответствующие количеству окон указанных пользователем, но не более 10-ти.

Имеющийся код

js:

<script language="JavaScript" type="text/javascript">
function show(){document.getElementById('info').style.display='block';}
function hide(){document.getElementById('info').style.display='none';}
</script>

html:

<p><b>Укажите имеются ли окна:</b></p>
Нет <input type="radio" name="okno" value="Нет" checked onChange="hide()">
Да <input type="radio" name="okno" value="Да" onChange="show()">
<div id="info" style="display:none">
<p><label><b>Ширина окна:</b><br><input name="sh_okn" size="2" /></label><br>
<label><b>Высота окна:</b><br><input name="vs_okn" size="2" /></label><br></p>
</div>

Большое спасибо за потраченное время! С праздником!!!

AllesKlar

23.02.2014 - 16:39

особо не вникая в код...
Я бы сделал кнопку "Добавить окно", при нажатии на нее, динамически добавляется форма ввода для очередного окна

_____________
[продано копирайтерам]

Kusss

23.02.2014 - 17:32

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
	<script language="JavaScript" type="text/javascript">
		function show(){document.getElementById('info').style.display='block';}
		function hide(){document.getElementById('info').style.display='none';}
		function add_div(){
			var div = document.getElementById('info');
			var new_div = document.getElementById('new_div');
			div.innerHTML = div.innerHTML + new_div.innerHTML;	
		}
	</script>

	<p><b>Укажите имеются ли окна:</b></p>
	Нет <input type="radio" name="okno" value="Нет" checked onChange="hide()">
	Да <input type="radio" name="okno" value="Да" onChange="show()">
	<div id="info" style="display:none">
		<span class="new" onClick="add_div()" style="cursor:pointer;cursor:hand;">Добавить ещё окно</span>
		<p><label><b>Ширина окна:</b><br><input name="sh_okn[]" size="2" /></label><br>
		<label><b>Высота окна:</b><br><input name="vs_okn[]" size="2" /></label><br></p>
	</div>
	<div id="new_div" style="display:none">
		<p><label><b>Ширина окна:</b><br><input name="sh_okn[]" size="2" /></label><br>
		<label><b>Высота окна:</b><br><input name="vs_okn[]" size="2" /></label><br></p>
	</div>
</body>
</html>

Как-то так можно.

Быстрый ответ:

Здесь расположена полная версия этой страницы.