Простенький калькулятор для сайта
 

Всем привет!
Для начала - я не программист) но посмотрела пару уроков(пока что) на javascript т.к. мне для сайта нужен написать калькулятор, а программисты заломили цены >___<
Учитывая что, калькулятор нужно будет постпенно обновлять, добавлять пункты, то я больше потрачу чем заработаю своим горе-сайтом) Так что решила научится сама :victory:

Итак) Калькулятор шкафов-купе) Точнее их дверей)
Дано. Есть профиль дверей. у него фиксированные цены, зависят от количества дверей и ширины шкафа( цены вот:
https://dl.dropboxusercontent.com/u/...46.54%20PM.png
Есть наполнение дверей (стекло, зеркало, ДСП и т.д.), цена за метр квадратный.
2 двери нельзя - нельзя при ширине проема больше 2950мм, только 3 и 4.

Галочка доставка - добавляет 1000р
Галочка установка - умножает количество дверей на 700р.
Галочка нанесение пескоструйнх рисунков - 1350 * кол-во дверей.

Есть задача которые я не знаю как решить, и прошу у вас совета.
1)Сделать option количества дверей 2 неактивными(или удалить его вообще) при ширине шкафа больше 2950мм.
2)Сделать галочку пескоструные рисунки неактивной если выбран ротанг или ДСП( только для зеркала и стекла это возможно)

Есть конечно еще куча идей, но потом.

Не ругайте сильно - вот что у меня получилось:

<script type="text/javascript">
function calc() {
var opt = document.getElementById("2dveri");
var vis = document.getElementById("vis");
var shir = document.getElementById("shir");
var dveri = document.getElementById("dveri");
var fill = document.getElementById("fill");
var dost = document.getElementById("dost");
var ust = document.getElementById("ust");
var result = document.getElementById("result");
var sq = parseInt(shir.value) * parseInt(vis.value);
var filling = parseInt(fill.options[fill.selectedIndex].value);
var cdveri = parseInt(dveri.options[dveri.selectedIndex].value);
var profil;
if ((parseInt(shir.value <= 2950) && (cdveri == 2)){
profil = 3960;
}
else if ((parseInt(shir.value) <= 2950) && (cdveri == 3)){
profil = 4950;
}
else if ((parseInt(shir.value) <= 2950) && (cdveri == 4)){
profil = 5940;
}
else if ((parseInt(shir.value) >= 2950) && (cdveri == 3)){
profil = 6930;
}
else if ((parseInt(shir.value) >= 2950) && (cdveri == 4)){
profil = 7810;
}
else{
profil = 0;
};
var ustanovka = (ust.checked == true) ? parseInt(ust.value) * cdveri : 0;
var dostavka = (dost.checked == true) ? parseInt(dost.value) : 0;
var risunok;
if ((filling == 2 || 3) && (ris.checked == true)) {
risunok = parseInt(ris.value) * sq/1000000;
}
else {risunok = 0;
};

var price = 0;
price += (Math.ceil(sq * filling/1000000 + profil + dostavka + ustanovka +risunok )) ;
result.innerHTML = price;}

</script>


<input id="vis" type="text" value="2300" onchange="calc()" /> высота, в мм
<br/>
<input id="shir" type="text" value="2500" onchange="calc()" /> ширина, в мм
<br/><b>Наполнение:</b><br/>

<select onchange="calc()" id="fill">
<option value="0">Выбрать</option>
<option value="1300">Стекло</option>
<option value="1500">Зеркало </option>
<option value="1400">Ротанг</option>
<option value="1400">ДСП</option>
</select><br/>
<b>Кол-во дверей:</b><br/>
<select onchange="calc()" id="dveri">
<option value="0">Выбрать</option>
<option id="2dveri" value="2">2</option>
<option id="3dveri" value="3">3</option>
<option id="4dveri" value="4">4</option>
</select><br/>
<input type="checkbox" onchange="calc()" value="333" id="dost" />
<label for="dost">Требуется доставка?</label>
<br/>
<input type="checkbox" onchange="calc()" value="555" id="ust" />
<label for="ust">Требуется установка?</label>
<br/>
<input type="checkbox" onchange="calc()" value="1350" id="ris" />
<label for="ris">
Нанесение пескоструйных рисунков</label>

<div>Примерная стоимость дверей: <span id="result">0</span> руб.</div>



Вот ! Жду ваших советов))) Спасибо! :-?

здесь пропущена закрывающая скобка

if ((parseInt(shir.value <= 2950) && (cdveri == 2)){

Только 3 и 4?
Или 0, 3 и 4?
Что делать, если у пользователя было выбрано 2 двери, а затем он увеличил ширину проема? Сбрасывать на 0 или увеличивать до 3?

Проверяйте на расчетах, потому что вот это в вашем коде не учитывается почему-то

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Калькулятор</title></head>
<body>
<form id="form" name="form">
	<input id="vis" type="text" value="2300" /> высота, в мм
	<br/>
	<input id="shir" type="text" value="2500" /> ширина, в мм
	<br/>
	<b>Наполнение:</b>
	<br/>
	<select id="fill">
		<option value="0">Выбрать</option>
		<option value="1300">Стекло</option>
		<option value="1500">Зеркало </option>
		<option value="1400">Ротанг</option>
		<option value="1400">ДСП</option>
	</select><br/>
	<b>Кол-во дверей:</b>
	<br/>
	<select id="dveri">
		<option value="0">Выбрать</option>
		<option id="2dveri" value="2">2</option>
		<option id="3dveri" value="3">3</option>
		<option id="4dveri" value="4">4</option>
	</select>
	<br/>
	<input type="checkbox" value="1000" id="dost" />
	<label for="dost">Требуется доставка?</label>
	<br/>
	<input type="checkbox" value="700" id="ust" />
	<label for="ust">Требуется установка?</label>
	<br/>
	<input type="checkbox" value="1350" id="ris" />
	<label for="ris">Нанесение пескоструйных рисунков</label>

	<div>Примерная стоимость дверей: <span id="result">0</span> руб.</div>
</form>
<script>
document.body.onload = function() {
	function calc() {
		var d = document, profil = risunok = ustanovka = dostavka = 0;
		var vis = +d.getElementById("vis").value,
		shir = +d.getElementById("shir").value,
		dveri = d.getElementById("dveri"),
		fill = d.getElementById("fill"),
		dost = d.getElementById("dost"),
		ust = d.getElementById("ust"),
		ris = d.getElementById("ris"),
		result = d.getElementById("result");
		
		if(shir > 2950) {
			if(dveri.options[dveri.selectedIndex].value == '2') {
				dveri.options[2].selected = true;
			}
			d.getElementById('2dveri').style.display = 'none';
		} else d.getElementById('2dveri').style.display = '';
		
		if(fill.selectedIndex == 3 || fill.selectedIndex == 4) {
			ris.checked = false;
			ris.disabled = true;
		} else {
			ris.disabled = false;
		};
		
		var sq = shir * vis / 1000000,
		cdveri = +dveri.value;
		if (shir <= 2950 && cdveri == 2) profil = 3960;
		else if (shir <= 2950 && cdveri == 3) profil = 4950;
		else if (shir <= 2950 && cdveri == 4) profil = 5940;
		else if (shir >= 2950 && cdveri == 3) profil = 6930;
		else if (shir >= 2950 && cdveri == 4) profil = 7810;
		if (ust.checked) ustanovka = +ust.value * cdveri;
		if (dost.checked) dostavka = +dost.value;
		if (ris.checked) risunok = +ris.value * cdveri;
		result.innerHTML = Math.ceil(sq * +fill.value + profil + dostavka + ustanovka + risunok );
	};
	document.form.onchange = calc;
	calc();
}
</script>
</body>
</html>

А можно узнать сколько заломили?

Спасибо! Странно - каким то чудом все таки работал мой код))
http://yarkoyarko.ru/calc.html

По поводу дверей.
Я посовещелась с мастером на производстве и он мне сказал что двери наилучшим образом делать так:
Ширина проема от 600мм до 6000мм. Если пользователь ввел меньше/больше, выводить сообщение что мы не изготоваливаем такие размеры.
Ширина проема делится на 1200(это макисмально возможная ширина одной двери) - получается минимальное количество дверей. Больше можно , меньше нельзя.

Нарпример, пользователь ввел ширину 2500.
Минимальное количество дверей для него - 3. Ширина каждой двери 834мм.

Количество дверей макисмальное - пускай будет 10(никто столько не заказывает, но пусть будет...) т.е. от 2 до 10.

Вообщем до момента как скрывать/делать неактивными элементы option в selecte мне все более или менее ясно..
Если ширину увеличили, то дверей должно стать например 3, но человек может выбрать и 4 и больше. Главное сделать недоступным то количество дверей при котором ширина одной двери становится больше 1200мм.

Вот нашла код где похожа задача(с деактивацией списка). Но немного не та))) Когда выбрана 1 опция то другая опция становится недоступна.

http://jsfiddle.net/davidThomas/qE4fN/

Что касается вопроса сколько заламывали цену - от 15 000р.
Я начинаю свое дело без денег(их просто нет), которое еще не изветно пойдет или нет, поэтому мне сумма эта неподъемная, и сайт сделала сама на шаблончике) А дальнейшем я конечно сделала бы все в лучшем виде...

Спасибо..

у меня там стояло value 333 и 555)) я пока писла цифры от балды главное чтоб работали!))
<input type="checkbox" onchange="calc()" value="333" id="dost" />
<input type="checkbox" onchange="calc()" value="555" id="ust" />

я так и сделал вроде в скрипте.да, имхо это много за полчаса-час работы. В следующий раз обращайтесь, сойдемся в цене :)

ну видят человек не слишком сведущий) и разводят как лоха ..)

о! я только сейчас заметила, что 2 двери стали неактивные) Спасибо!!
Почему то у меня 2ка по прежнему черная - поэтому я не сразу заметила!! может ее както сделать по аналогии с ris.disabled = true;, который серым становится,
типа
d.getElementById('2dveri').disabled = true;
Попробовала подставить- не работает)

а нет, работает!

хм... у меня вот так: если ширина большая, то 2ки нет в выборе. При этом если до того, как ширина стала большой, была выбрана 2ка, выбор автоматически переключается на 3ку
Если выбран ротанг и ДСП, то галочка рисунка становится неактивной. Если до выбора галочка стояла, она автоматически снимается.

а у меня видно... Браузер Chrome.

Перескакивает автоматически, это да. Выбрать ее невозможно, то есть все верно кроме того что по прежнему видно.

Я попробовала через - d.getElementById('2dveri').disabled = true; - становится неактивной серой как и чекбокс пескоструных рисунков.

UPD. В Firefox не видно! в Chrome видно, в Safari видно.