Title :

On 20.10.2017 by nikellanjilo

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


<form role="form" action='' method='POST' >


<div>Направление</div>


<select onchange = "sayMya();" name="direction" class="nameOrg" data-tilda-req="1" style="color:#000000; border:3px solid #59c0df; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
<option value="Робототехника" selected="selected">Робототехника</option>
<option value="Шахматы8" >Шахматы 8 занятий</option>
<option value="Шахматы4" >Шахматы 4 занятия</option>
</select>

<div> Площадка</div>


<select name="place" onchange = "sayMya();" class="Place" data-tilda-req="1" style="color:#000000; border:3px solid #59c0df; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
<option value="Беловежская" selected="selected">Беловежская</option>
<option value="Строгино" >Строгино</option>
<option value="Жулебино" >Жулебино</option>
<option value="Свиблово" >Свиблово</option>
<option value="Звенигород" >Звенигород</option>
<option value="Можайск" >Можайск</option>
</select>

<div>Количество оплачиваемых месяцев (скидки при оплате нескольких месяцев сразу)</div>

<select onchange = "sayMya();" name="nummonth" class="Price" data-tilda-req="1" style="color:#000000; border:3px solid #59c0df; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
<option value="Одно занятие" >Одно занятие</option>
<option value="1" >1 месяц</option>
<option value="2" >2 месяца</option>
<option value="3 - 10% скидка" selected="selected">3 месяца - 10% скидка</option>
<option value="4 - 10% скидка" >4 месяца - 10% скидка</option>
<option value="5 - 10% скидка" >5 месяцев - 10% скидка</option>
</select>

<div> Сумма оплаты</div>

<input onchange="changeSum();" type="text" name="amountpay" class="t-input js-tilda-rule newSum" value="" placeholder="3000" data-tilda-req="1" style="color:#000000; border:3px solid #59c0df; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
</form>


// При загрузке страницы инициализируем окно суммы
window.onload = function(){
var newSum = undefined;
sayMya(newSum);
}
// Главная функция ("СкажиМяу")
function sayMya(newSum)
{
cursorPrice = $('.Price :selected').val(); // Получает значение из селектора с классом Price
cursorOrg = $('.nameOrg :selected').val();// Получает значение из селектора с классом nameOrg
cursorPlace = $('.Place :selected').val(); // Получает значение из селектора с классом Place

var isMonth = false; // булева переменная, определяет выбрал пользователь оплату по месяцам или по дням
var discount = 1; // Расчет скидки (0..1)
var months = 1; // Кол-во оплаченных месяцев
var price = 1000; // Цена за курс


// Смотрим данные селектора с классом Price и определяем скидку и параметр isMonth
switch(cursorPrice)
{
case ('Одно занятие') :
isMonth = false;
discount = 1;
break;

case ('1'):
case ('2'):
isMonth = true;
discount = 1;
break;

case ('3 - 10% скидка') :
case ('4 - 10% скидка') :
case ('5 - 10% скидка') :
isMonth = true;
discount = 0.9;
break;

default :
break;
}

// Смотрим данные селектора с классом Price и кол-во месяцев (только месяцев!!!)
switch(cursorPrice)
{
case ('1') : months = 1; break;
case ('2') : months = 2; break;
case ('3 - 10% скидка') : months = 3; break;
case ('4 - 10% скидка') : months = 4; break;
case ('5 - 10% скидка') : months = 5; break;
}
// Смотрим данные селектора с классом Place и определяем цену за месяц/день
// в зависимости от локации индивида
switch(cursorPlace)
{
case ('Беловежская') :
switch(cursorOrg)
{
case ('Робототехника') : price = isMonth ? 3000 : 1000; break;
case ('Шахматы8') : price = isMonth ? 3200 : 700; break;
case ('Шахматы4') : price = isMonth ? 2000 : 700; break;
default : break;
}
break;
case ('Строгино') :
switch(cursorOrg)
{
case ('Робототехника') : price = isMonth ? 3000 : 1000; break;
case ('Шахматы8') : price = 0; break;
case ('Шахматы4') : price = 0; break;
default : break;
}
break;
case ('Свиблово') :
switch(cursorOrg)
{
case ('Робототехника') : price = isMonth ? 3000 : 1000; break;
case ('Шахматы8') : price = 0; break;
case ('Шахматы4') : price = 0; break;
default : break;
}
break;
case ('Жулебино') :
switch(cursorOrg)
{
case ('Робототехника') : price = isMonth ? 3000 : 1000; break;
case ('Шахматы8') : price = 0; break;
case ('Шахматы4') : price = 0; break;
default : break;
}
break;

case ('Звенигород') :
switch(cursorOrg)
{
case ('Робототехника') : price = isMonth ? 3000 : 1000; break;
case ('Шахматы8') : price = isMonth ? 3200 : 700; break;
case ('Шахматы4') : price = isMonth ? 2000 : 700; break;
default : break;
}
break;
case ('Можайск') :
switch(cursorOrg)
{
case ('Робототехника') : price = isMonth ? 2500 : 850; break;
case ('Шахматы8') : price = 0; break;
case ('Шахматы4') : price = 0; break;
default : break;
}
break;
default : break;
}
// Расчитываем сумму (если параметром newSum не передается значение), если передается - count = newSum
var count = newSum === undefined ? price * months * discount : newSum;

// Создаем переменную согласно требований Тильды
var value = '#order:' + cursorOrg + ',' + cursorPlace + ',' + cursorPrice + '=' + count;

// Полученное значение вставляем в качестве ссылки
//document.getElementById('abc').href = value;

// Сумму исходя из бизнес-логики вставляем в поле "Сумма к оплате"
document.getElementsByName('amountpay')[0].value = count;
}

// Функция, выполняющаяся при изменении значения в поле "Сумма к оплате"
function changeSum(){
var url = document.getElementById('abc').href;
var newSum = document.getElementsByName('amountpay')[0].value;
sayMya(newSum);
// alert(newSum);
}


Уроки по разработке веб-сайтов