Подсказка в доработке калькулятора
Здравствуйте. Написал калькулятор следующего содержания (ссылка ниже). Дело в том, что я не особо разбираюсь в 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> |
Зачем тогда воткнули аякс с гугля?
Начните его юзать. Передавайте на сервер данные с полей и там считайте. На сервере все цены, скидки, акции, условия - все там. Сервер выдаст число - сумму - его только показать и все. |
Часовой пояс GMT +3, время: 11:59. |