Javascript-форум - Разные значения в зависимости от опций

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Разные значения в зависимости от опций (https://javascript.ru/forum/events/43187-raznye-znacheniya-v-zavisimosti-ot-opcijj.html)

Batyabest

25.11.2013 21:48

Разные значения в зависимости от опций

Здравствуйте.
Помогите решить задачу.
Имеется 4 различных параметра.
Назовем их:
1. тип помещения
2. тип окна
3. тип профиля
4. Стоимость

Тип помещения - панельный и кирпичный.
Как сделать так, чтобы в зависимости от того какой выбран тип помещения калькулятор считал свои значения Стоимости.

Реализовать нужно в таком виде:

<table> 
<tbody>
 
<tr> 
<td>Тип здания</td> 
<td>
<select name="room" id="room">
<option value="0" selected="selected">Выбрать...</option>
<option value="1">Панельный</option>
<option value="2">Кирпичный</option>
</select>
</td> 
</tr>

То есть как только выбрать тип дания - доступны для выбора становяться только заранее прописанные значения других параметров.
В снизу чтобы все это считалось - стоимости где-то прописаны должны быть.
Получиться должно так: выбрал тип здания - выбрал профиль, выбрал тип окна опс - цена снизу написана.

Batyabest

25.11.2013 22:55

Помогите, господа профессионалы.

Batyabest

26.11.2013 14:29

Неужели это действитльно так сложно реализовать?

ksa	26.11.2013 14:34

Цитата:

Сообщение от Batyabest

Неужели это действитльно так сложно реализовать?

1000р и погнали реализовывать. :yes:
Или это уже сложно? :D

Batyabest

26.11.2013 14:41

Сложно:)
Может подскажешь в каком направлении думать, я бы сам сделал, просто не пойму с чего начать

ksa	26.11.2013 14:45

Цитата:

Сообщение от Batyabest

Сложно

Значит это уже твои проблемы...

Цитата:

Сообщение от Batyabest

я бы сам сделал

В этом я сильно сомневаюсь... :D

Batyabest

26.11.2013 14:51

Цитата:

Значит это уже твои проблемы...

Все понятно, денег срубить не получилось, значит безвозмездно подсказать (заметь, не сделать) мы уже не можем. Че за народ...

Цитата:

В этом я сильно сомневаюсь...

А свои сомнения оставь при себе. Просто с твоей бы помощью я это сделал бы быстрее гораздо.

xAockd

26.11.2013 14:51

Ты напиши что не получается, код какой-то покажи. Похожие примеры уже были на форуме, или раздел работа

ksa	26.11.2013 14:53

Цитата:

Сообщение от Batyabest

Че за народ...

И не говори... :D

Batyabest

26.11.2013 14:54

Цитата:

Сообщение от xAockd (Сообщение 282885)

Ты напиши что не получается, код какой-то покажи. Похожие примеры уже были на форуме, или раздел работа

ок, спасибо, что откликнулись. Позже напишу код, который сам нацарапал с грехом пополам.

Batyabest

26.11.2013 15:34

Ниже привожу код - там скорее всего только каркас, котрый нужно "оживить"ю

function Display(which) {
  co1=document.getElementById("constr1");
  co2=document.getElementById("constr2");
  co3=document.getElementById("constr3");
  if (which=="constr1") co1.style.display="block";
    else co1.style.display="none";
  if (which=="constr2") co2.style.display="block";
    else co2.style.display="none";
  if (which=="constr3") co3.style.display="block";
    else co3.style.display="none";
}

<h2>Калькулятор стоимости</h2>
<form name="calc">
	<p>Выберите тип здания</p>
	<input type="radio" name="type" value="panel" checked>Панельный<br>
	<input type="radio" name="type" value="kirpich">Кирпичный
	<p>Выберите тип окна</p>
		<table border="0" cellpadding="0" cellspacing="0" width="500" height="1" id="maintbl">
			<tbody>
				<tr valign="middle" height="1">
					<td align="center" style="padding:0 5px;">
						<img src="/img/1.jpg" border="0" height="105">
						<br>
						<input type="radio" name="constr_type" value="constr1" checked onClick="Display('constr1');">
					</td>
					<td align="center" style="padding:0 5px;">
						<img src="/img/2.jpg" border="0" height="105">
						<br>
						<input type="radio" name="constr_type" value="constr2" onClick="Display('constr2');">
					</td>
					<td align="center" style="padding:0 5px;">
						<img src="/img/3.jpg" border="0" height="105">
						<br>
						<input type="radio" name="constr_type" value="constr3" onClick="Display('constr3');">
					</td>
				</tr>
			</tbody>
		</table>
		
<div id="constr1">
	<img src="/img/solid_w.jpg" style="display:block;">
</div>		
		
<div id="constr2">
	<img src="/img/solid_wv.jpg" style="display:none">
</div>		
		
<div id="constr3">
	<img src="/img/solid_wv1.jpg" style="display:none">
</div>		
		
	<p>Выберите тип профиля</p>
		<input type="radio" name="prifile_type" value="profile1" checked>Kraspan<br>
		<input type="radio" name="prifile_type" value="profile2">Veka<br>
		<input type="radio" name="prifile_type" value="profile3">Veka ProLine<br>
</form>

В скрипте который написан смысл вот какой - при выборе типа окна (constr1, 2, 3) Должен отображаться соответсвующий рисунок крупнее в дивах constr1, 2, 3. но у меня почему-то при выборе значения 2 и 3 крупная картинка пропадает, а при выборе constr1 появляется как положено.

Batyabest

26.11.2013 15:40

Цитата:

Сообщение от Batyabest

но у меня почему-то при выборе значения 2 и 3 крупная картинка пропадает, а при выборе constr1 появляется как положено.

Разобрался сам. style display="none" было прописано у img, а не у div

ksa	26.11.2013 16:00

Да и сам код, вместе с контентом не фонтан...

Это тебе на анализы. :D

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function Display(Obj) {
	var o=document.getElementById('img_all').getElementsByTagName('div');
	var id=Obj.value;
	for (var i=0; i<o.length; i++) {
		o[i].style.display=(o[i].id==id)? 'block': 'none';
	};
};
</script>
</head>
<body>
<h2>Калькулятор стоимости</h2>
<form name="calc">
	<p>Выберите тип здания</p>
	<input type="radio" name="type" value="panel" checked>Панельный<br>
	<input type="radio" name="type" value="kirpich">Кирпичный
	<p>Выберите тип окна</p>
	<table border="0" cellpadding="0" cellspacing="0" width="500" height="1" id="maintbl">
		<tbody>
			<tr valign="middle" height="1">
				<td align="center" style="padding:0 5px;">
					<img src="/img/1.jpg" border="0" height="105">
					<br>
					<input type="radio" name="constr_type" value="constr1" checked onclick="Display(this);">
				</td>
				<td align="center" style="padding:0 5px;">
					<img src="/img/2.jpg" border="0" height="105">
					<br>
					<input type="radio" name="constr_type" value="constr2" onclick="Display(this);">
				</td>
				<td align="center" style="padding:0 5px;">
					<img src="/img/3.jpg" border="0" height="105">
					<br>
					<input type="radio" name="constr_type" value="constr3" onclick="Display(this);">
				</td>
			</tr>
		</tbody>
	</table>
	<div id='img_all'>	
		<div id="constr1">
			<img src="http://javascript.ru/forum/images/smilies/smile.gif" />
		</div>		
		<div id="constr2" style="display:none">
			<img src="http://javascript.ru/forum/images/smilies/mad.gif" />
		</div>		
		<div id="constr3" style="display:none">
			<img src="http://javascript.ru/forum/images/smilies/laugh.gif" />
		</div>		
	</div>		
	<p>Выберите тип профиля</p>
	<input type="radio" name="prifile_type" value="profile1" checked>Kraspan<br>
	<input type="radio" name="prifile_type" value="profile2">Veka<br>
	<input type="radio" name="prifile_type" value="profile3">Veka ProLine<br>
</form>
</body>
</html>

Batyabest

26.11.2013 16:13

Цитата:

Сообщение от ksa

Это тебе на анализы.

Это ты типа сжалился надо мной? А как же неполученная материальная выгода? :)

ksa	26.11.2013 16:17

Цитата:

Сообщение от Batyabest

Это ты типа сжалился надо мной?

Жалость тут не при чем. :D
Просто вижу - действительно человек что-то ваяет... Значит имеет право на помощь/подсказку.

Цитата:

Сообщение от Batyabest

А как же неполученная материальная выгода?

Я каждый вечер плачу, подсчитывая убытки... :cray:

Batyabest

26.11.2013 16:21

Вот если бы ты мне подсказал как мне еще и разные стоимости забить в зависимости от того, что выбрано в самом начале - панельный или кирпичный. Было бы вообще GOOD

Batyabest

26.11.2013 16:30

<script language="javascript">
function Display(which) {
  co1=document.getElementById("constr1");
  co2=document.getElementById("constr2");
  co5=document.getElementById("constr5");
  if (which=="constr1") co1.style.display="block";
    else co1.style.display="none";
  if (which=="constr2") co2.style.display="block";
    else co2.style.display="none";
  if (which=="constr5") co5.style.display="block";
    else co5.style.display="none";
}
</script>
<h2>Калькулятор стоимости</h2>
<form name="calc">
	<p>Выберите тип здания</p>
	<input type="radio" name="type" value="panel" checked>Панельный<br>
	<input type="radio" name="type" value="kirpich">Кирпичный
	<p>Выберите тип окна</p>
		<table border="0" cellpadding="0" cellspacing="0" width="500" height="1" id="maintbl">
			<tbody>
				<tr valign="middle" height="1">
					<td align="center" style="padding:0 5px;">
						<img src="/img/1.jpg" border="0" height="105">
						<br>
						<input type="radio" name="constr_type" value="constr1" checked onClick="Display('constr1');">
					</td>
					<td align="center" style="padding:0 5px;">
						<img src="/img/2.jpg" border="0" height="105">
						<br>
						<input type="radio" name="constr_type" value="constr2" onClick="Display('constr2');">
					</td>
					<td align="center" style="padding:0 5px;">
						<img src="/img/5.jpg" border="0" height="105">
						<br>
						<input type="radio" name="constr_type" value="constr5" onClick="Display('constr5');">
					</td>
				</tr>
			</tbody>
		</table>
		
<div id="constr1" style="display:block; margin: 20px 0;">
	<img src="/img/solid_w.jpg">
</div>		
		
<div id="constr2" style="display:none; margin: 20px 0;">
	<img src="/img/solid_w.jpg">
	<img src="/img/solid_w.jpg" style="margin: 0 0 0 -10px;">
</div>		
		
<div id="constr5" style="display:none; margin: 20px 0;">
	<img src="/img/solid_w.jpg" style="margin: 0 0 104px 0;">
	<img src="/img/turnrew_b.jpg" style="margin: 0 0 0 -10px;">
</div>		
		
	<p>Выберите тип профиля</p>
		<input type="radio" name="prifile_type" value="profile1" checked>Kraspan<br>
		<input type="radio" name="prifile_type" value="profile2">Veka<br>
		<input type="radio" name="prifile_type" value="profile3">Veka ProLine<br>
</form>

Получилось вот так. Следующий этап - это забить в коде стоимости. Они разные в зависимости от типа здания (панельный или кирпичный), типа профиля и типа окна.
Я думаю главным критерием сделать тип здания. Мол если панельный, то такая цена ушла в сумму, а если кирпичный то другая.

подскажите с чего начать. Мне кажется надо чего-то передавать в полях type="hidden"?

ksa	26.11.2013 16:32

Цитата:

Сообщение от Batyabest

подскажите с чего начать

С определения зависимостей тех цен... Нужно точно знать как одно зависит от другого, от этого и плясать...

ksa	26.11.2013 16:35

Цитата:

Сообщение от Batyabest

Получилось вот так.

Сильно смахивает на говнокод... :-E

Начинай использовать классы, вместо style... Определяй однотипные элементы... И про циклы не забывай! :D Все эти "перечисления случаев" сильно смахивает на ламерство. ;)

Batyabest

26.11.2013 16:38

Цитата:

Сообщение от ksa

С определения зависимостей тех цен...

Все дело в том, что цены не изменяются на какую-то определенную величину постоянную. Понятно одно, в кирпичном доме дороже.

Batyabest

26.11.2013 16:41

Цитата:

Сообщение от ksa (Сообщение 282936)

Согласен. Но мне на данном этапе нужно разобраться с принципом работы. А про то что нужно использовать классы я согласен, просто сейчас есть более приоритетные задачи - сделать чтобы все работало. а потом буду до ума доводить.

ksa	26.11.2013 16:42

Цитата:

Сообщение от Batyabest

дело в том, что цены не изменяются на какую-то определенную величину постоянную

Если не найдешь зависимости - придется формировать некую "таблицу соответствий"...

ksa	26.11.2013 16:43

Цитата:

Сообщение от Batyabest

потом буду до ума доводить

Это нужно выжигать каленым железом! :D

Batyabest

26.11.2013 16:48

Цитата:

Сообщение от ksa

придется формировать некую "таблицу соответствий"...

Как ее сформировать?
Понятное дело было бы проще, если бы, например, в кирпичном доме было бы на х дороже. Тогда бы просто повесить на кнопку с кирпичным +х. но тут разное увеличение стоимости. Значит надо сделать так:
Тип окна1 - Профиль 1: цена 1 Цена 2
Тип окна 1 - Профиль 2: цена 1 цена 2
Тип окна 1 - Профиль 3: цена 1 цена 2

Тип окна 2 - Профиль 1: цена 1 цена 2

и т.д.

на бумаге могу сделать, а как это сделать в коде?

Batyabest

26.11.2013 17:03

Цитата:

Сообщение от Poznakomlus

надо сесть и спроектировать свою таблицу баз данных

Это уже мне кажется я совсем зашьюсь. Хотя я понимаю что нужно создать в базе таблицу. В нее забить значения цен. А как это все сделать?

Batyabest

26.11.2013 17:26

У меня все это дело на Joomla - есть ли какие-то плагины для данной задачи? Я не нашел че-то

Vlasenko Fedor

26.11.2013 17:30

http://joomlaforum.ru/index.php/topic,145164.0.html

Batyabest

26.11.2013 17:32

Спасибо добрый человек. Буду смотреть.

ksa	26.11.2013 19:40

Цитата:

Сообщение от Batyabest

Как ее сформировать?

У тебя есть цифры и ты не знаешь "как". :D
А у нас даже этого нет - т.ч. нам-то откуда знать?

Часовой пояс GMT +3, время: 03:30.