Форум

ANALGIN · #1 (**permalink**) 28.11.2013, 14:19

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

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Каркулятор</title>
<meta http-equiv="Content-Type" content="text/html" />
      <script type="text/javascript">
      function calc() {
			var type_a = document.getElementById("type_a");
			if ( type_a.selectedIndex==3 ) { 
			document.getElementById('type_b').disabled=true; 
			} else { 
			document.getElementById('type_b').disabled=false; 
			} 			//** для отключения при выборе одного из нескольких пунктов typa_a ((type_a.selectedIndex==3) || (type_a.selectedIndex==2))
			var type_b = document.getElementById("type_b");
			
			var result = document.getElementById("result");

			var price = 0;
			price = parseInt(type_a.value) + parseInt(type_b.value) ;

          result.innerHTML = price;
      }

      </script>

</head>
<body>
<select id="type_a" onchange="calc()">
				  <option value="0">a</option>				 
				  <option value="1">b</option>
				  <option value="2">c</option>
				  <option value="3">Вторая переменная отсутствует</option>
</select>
<select id="type_b" onchange="calc()">
				  <option value="0">d</option>				 
				  <option value="1">e</option>
				  <option value="2">f</option>
</select>
<br/>
      <div><strong>Сумма переменных </strong> <span id="result">0</span></div>
</body>
</html>

...а начинаю применять к полной форме - борода:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>КАРКУЛЯТОР 2</title>
<meta http-equiv="Content-Type" content="text/html" />
      <script type="text/javascript">

     //** Функция подсчета стоимости*
      function calc() {
			var type_work = document.getElementById("type_work");
			if ( type_work.selectedIndex==200 ) { 
			document.getElementById("type_color").disabled=true; 
			} else { 
			document.getElementById("type_color").disabled=false; 
			}
			//** var type_math = document.getElementById("type_math"); *
			var type_franch = document.getElementById("type_franch");
			var type_color = document.getElementById("type_color");			
			var type_art = document.getElementById("type_art");			
			var type_straz = document.getElementById("type_straz");			
			var type_dop = document.getElementById("type_dop");	
			var type_lak = document.getElementById("type_lak");		
			var result = document.getElementById("result");

			var price = 0;

          result.innerHTML = price;
      }
		</script> 

</head>
<body>
			<h5><b>Калькулятор:</b><br/>
				<select id="type_work" onchange="calc()">
				  <option value="0">Вид работ</option>				 
				  <option value="750" title="База, удлинение на форме, камуфлирующий гель и защита">Наращивание ногтей</option>
				  <option value="550" title="База, камуфлирующий гель, защита">Покрытие ногтей гелем</option>
				  <option value="550" title="">Коррекция(до 5 недель)</option>
				  <option value="650" title="Или коррекция после другого мастера">Коррекция(более 5 недель)</option>
				  <option value="750" title="Перехоженая, упущенная">Коррекция после другого мастера</option>
				  <option value="650" title="База, удлинение на форме, прозрачный гель и защита">Экспресс-наращивание ногтей</option>
				  <option value="450" title="До 5 недель">Экспресс-коррекция</option>
				  <option value="400" title="База, 2 слоя цвета и защита">&quot;Евростандарт&quot;</option>
				  <option value="200" title="База, два слоя цвета, защита">Покрытие ногтей гель-лаком</option>
			  </select>
				<br/>
				
				<!-- <select id="type_math" onchange="calc()">
				  <option value="0" title="">Класс материалов</option>				 
				  <option value="0" title="">Продукция медиум класса PULSAR by CNI</option>
				  <option value="150" title="">Продукция премиум класса CNI-NSP</option>
				  <option disabled title="">Продукция медиум класса IRISK, RuNail</option>
			  </select>
				<br/> -->
				<select id="type_franch" onchange="calc()">
				  <option value="0" title="">&quot;Французский маникюр&quot; не нужен</option>				 
				  <option value="50" title="Одноцветный френч">&quot;Французский маникюр&quot; простой</option>
				  <option value="100" title="Миллениум, растяжка,&quot;лунный&quot;, 2 и более цвета, радужный, &quot;литье&quot;, эффект кракелюра">&quot;Французский маникюр&quot; сложный</option>
			  </select>
				<br/>
				<select id="type_color" onchange="calc()">
				  <option value="0" title="">Покрытие цветом не требуется</option>				 
				  <option value="50" title="Покрытие всего ногтя одним цветом">Однотонное покрытие</option>
				  <option value="100" title="Покрытие всего ногтя разными цветами">Покрытие два и более цвета</option>
			  </select>
				<br/>
				<select id="type_art" onchange="calc()">
				  <option value="0" title="">Нейл-Арт (роспись, дизайн) не требуется</option>				 
				  <option value="25" title="">Нейл-Арт на 1 ногте</option>
				  <option value="50" title="">Нейл-Арт на 2 ногтях</option>
				  <option value="75" title="">Нейл-Арт на 3 ногтях</option>
				  <option value="100" title="">Нейл-Арт на 4 ногтях</option>
				  <option value="125" title="">Нейл-Арт на 5 ногтях</option>
				  <option value="150" title="">Нейл-Арт на 6 ногтях</option>
				  <option value="175" title="">Нейл-Арт на 7 ногтях</option>
				  <option value="200" title="">Нейл-Арт на 8 ногтях</option>
				  <option value="225" title="">Нейл-Арт на 9 ногтях</option>
				  <option value="250" title="">Нейл-Арт на 10 ногтях</option>
			  </select>
				<br/>
				<select id="type_straz" onchange="calc()">
				  <option value="0" title="">Стразы не нужны</option>				 
				  <option value="0" title="">1-10 страз</option>
				  <option value="50" title="">11-30 страз</option>
				  <option value="100" title="">31-50 страз</option>
				  <option value="150" title="">51-100 страз</option>
				  <option value="200" title="">Более 100 страз</option>
			  </select>
				<br/>
				<select id="type_dop" onchange="calc()">
				  <option value="0" title="">Дополнительные работы не нужны</option>				 
				  <option value="200" title="">Снятие геля</option>
				  <option value="150" title="">Снятие &quot;Евростандарт&quot;</option>
				  <option value="100" title="">Снятие гель-лака</option>
			  </select>
				<br/>
				<select id="type_lak" onchange="calc()">
				  <option value="0" title="">Снимать лак не прийдется</option>				 
				  <option value="20" title="">Потребуется снятие лака</option>
			  </select>
				<br/>
      <div><strong>Стоимость работ:</strong> <span id="result">0</span> руб.</div>	
</body>
</html>

JS начал изучать 45 минут назад, так что могу не увидеть простейшую ошибку.

рони · #2 (**permalink**) 28.11.2013, 14:52

ANALGIN,
type_work.selectedIndex==200 --- у вас в селекторе 200 опций или может всётаки 9? и для кода html лучше

ANALGIN · #3 (**permalink**) 28.11.2013, 15:01

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

ANALGIN,
type_work.selectedIndex==200 --- у вас в селекторе 200 опций или может всётаки 9? и для кода html лучше

От жеш! Спасибо, добрый человек!
Что то даже не подумал прочитать про свойства selectedIndex.

Форум

Справочник

Discord чат

Курсы javascript