Здравствуйте. Написал калькулятор следующего содержания (ссылка ниже). Дело в том, что я не особо разбираюсь в 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"> м²
</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"> шт.
</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"> шт.
</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>
