Показать сообщение отдельно
  #1 (permalink)  
Старый 19.02.2014, 19:21
Новичок на форуме
Отправить личное сообщение для nezleek Посмотреть профиль Найти все сообщения от nezleek
 
Регистрация: 19.02.2014
Сообщений: 1

Подсказка в доработке калькулятора
Здравствуйте. Написал калькулятор следующего содержания (ссылка ниже). Дело в том, что я не особо разбираюсь в javascript, попросили его немного изменить, в частности нужно следующее:

1) Сумма заказа должна быть от 3000 рублей (переменная #total4), иначе выдает сообщение, что заказ слишком маленький.
2) Если площадь Вашего потолка меньше 4 кв.м. общая стоимость увеличивается на 1000 рублей (переменная #square меньше 4)
3) Если площадь Вашего потолка от 4 до 6 кв.м. общая стоимость увеличивается на 500 рублей. (4< переменная #square < 6)

Буду очень благодарен за подсказки.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Калькулятор и форма</title>
<style>
	h1 {font-size: 18px; font-family: Arial;}
	table.euform {width: 600px; font-size: 12px; font-family: Arial;}
	table.euform tr.c0 {font-weight: bold; font-size: 13px;}
	table.euform tr.c1 {}
	table.euform tr.c2 {}
	table.euform td {padding: 10px 5px 10px 5px}	   
	table.euform textarea, table.euform select {padding: 1px; border: 1px solid #cccccc; width: 320px;}
	table.euform .input {width: 320px; padding: 2px; border: 1px solid #cccccc;}
	table.euform label {font-size: 12px;}
	table.euform span {font-size: 14px; color: #000000; font-weight: bold;} 
	div.error { margin: auto; font-size: 12px; font-family: Arial; font-weight: bold; text-align: left; border: 1px solid #e57f7f;  padding: 7px 7px 7px 20px;}
</style>	 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>  
<script type=text/javascript> 
$(document).ready(function(){
  
  ///////////////////////////////////////////////////////////////////////////////////////
  // нажата кнопка Расcчитать
  ///////////////////////////////////////////////////////////////////////////////////////
  $("#calc").click(function () {   
    if ($("#square").val() == "" || $("#metr").val() == "") {
	   alert ("Не заполнены обязательные поля!");
	   return false;
	 }
	 var metr_price = $("#metr").val() //цена за метр из select
	 var sq = $("#square").val(); // площадь из input
	 var sq_m2 =  sq * metr_price;  //стоимость потолка
	 
	 var tube_total = $("#tube").val() * 300; //трубы сумма
 	 var light_total = $("#light").val() * 250; //светильники сумма	
	 var total_sum = sq_m2 + tube_total + light_total;
	 var total_sum_discount = total_sum - total_sum*0.1;	 //10% скидка

	 $("#total4").text ("Общая сумма: "+total_sum+" руб.");
     $("#total5").text ("Общая сумма со скидкой 10%: "+total_sum_discount+" руб."); 	 
  });  
});

</script>
</head>
<body>
<div style="text-align: center"><h1>Расчет стоимости потолка</h1></div>
<br>

<div class="calculator">	
<table  border="0" cellpadding="0" cellspacing="0" align="center" class="euform">
<tr class="c0">	 
<td colspan="2">
Пожалуйста, введите необходимые параметры. При расчете учитывается скидка 10% (заказ с сайта). Замер осуществляется <span style="text-decoration: underline;">бесплатно</span> в черте города  с 8.00 до 21.00, включая выходные и праздничные дни.

</td>
</tr>
<tr class="c1">	
<td align="right"><label for="metr"><b>Тип потолка *</b></label></td>
<td style="padding-left: 20px;">
<select style="width: 325px;" name="metr" id="metr">
<option value="0" selected></option> 
<option value="370">ИМПОРТНЫЙ ШОВНЫЙ МАТОВЫЙ/ГЛЯНЕЦ</option> 
<option value="470">ИМПОРТНЫЙ БЕСШОВНЫЙ МАТОВЫЙ/ГЛЯНЕЦ/САТИН</option>
</select>
</td>
</tr> 
<tr class="c2">
<td align="right"><label for="square"><b>Площадь потолка *</b></label></td>
<td style="padding-left: 20px;">
<input type="text" name="square" id="square" class="input" style="width: 60px; text-align: right">&nbsp;м&sup2;
</td>
</tr>  
<tr class="c1">
<td align="right"><label for="light"><b>Точки освещения</b></label></td>
<td style="padding-left: 20px;">
<input type="text" name="light" id="light" class="input" style="width: 60px; text-align: right" value="0">&nbsp;шт.
</td> 
</tr>
<tr class="c2">
<td align="right"><label for="tube"><b>Обход труб</b></label></td>
<td style="padding-left: 20px;">
<input type="text" name="tube" id="tube" class="input" style="width: 60px; text-align: right" value="0">&nbsp;шт.
</td> 
</tr>
 
<tr class="c2">
<td align="right"></td>
<td style="padding-left: 20px;"><input type="button" id="calc" name="calc" value="Расcчитать"></td>
</tr>  
<tr class="c2"><td colspan=2>
<span id="total1"></span><br>
<span id="total2"></span><br>
<span id="total3"></span><br><br>
<span id="total4"></span><br>
<span id="total5"></span><br>


</td></tr>
</table>
</div>

</html>
Ответить с цитированием