Здравствуйте.
Мне нужно сделать что то типа калькулятора тарифа для виртуального сервера.
В таком виде что бы при выборе определенного параметра менялась сразу же цена на javascript.
Нашел вот такое решение
Код (+/-)
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Тип дисков</h1>
<p>
<select name="diskType" id="diskType" onchange="change()">
<option value="1">KVM HDD (199руб)</option>
<option value="2">KVM SSD (269руб)</option>
<option value="3">KVM NVMe (329руб)</option>
</select>
</p>
<h1>Дополнительные ресурсы</h1>
<p>
<label for="cpuHDD">CPU HDD</label>
<select name="cpuHDD" id="cpuHDD" onchange="change()">
<option value="0">Не выбрано</option>
<option value="1">1 CPU (60руб)</option>
<option value="2">2 CPU (120руб)</option>
<option value="3">3 CPU (180руб)</option>
<option value="4">4 CPU (240руб)</option>
<option value="5">5 CPU (300руб)</option>
<option value="6">6 CPU (360руб)</option>
<option value="7">7 CPU (420руб)</option>
<option value="8">8 CPU (480руб)</option>
</select>
</p>
<p>
<label for="ramHDD">RAM HDD</label>
<select name="ramHDD" id="ramHDD" onchange="change()">
<option value="0">Не выбрано</option>
<option value="1">1 RAM (80руб)</option>
<option value="2">2 RAM (160руб)</option>
<option value="3">3 RAM (240руб)</option>
<option value="4">4 RAM (320руб)</option>
<option value="5">5 RAM (400руб)</option>
<option value="6">6 RAM (480руб)</option>
</select>
</p>
<p>
<label for="diskSpace">Место на диске</label>
<input id="diskSpace" type="range" min="30" max="500" step="10" value="30" onchange="change()">
</p>
<p>
Общая стоимость: <span id="sum">199 руб</span>
</p>
<script>
function change(){
diskType = document.getElementById('diskType').value;
cpuHDD = document.getElementById('cpuHDD').value;
ramHDD = document.getElementById('ramHDD').value;
diskSpace = document.getElementById('diskSpace').value;
switch (diskType) {
case '1':
diskPrice = 199;
break;
case '2':
diskPrice = 269;
break;
case '3':
diskPrice = 329;
break;
}
switch (cpuHDD) {
case '0':
cpuHDD = 0;
break;
case '1':
cpuHDD = 60;
break;
case '2':
cpuHDD = 120;
break;
case '3':
cpuHDD = 180;
break;
case '4':
cpuHDD = 240;
break;
case '5':
cpuHDD = 300;
break;
case '6':
cpuHDD = 360;
break;
case '7':
cpuHDD = 420;
break;
case '8':
cpuHDD = 480;
break;
}
switch (ramHDD) {
case '0':
ramHDD = 0;
break;
case '1':
ramHDD = 80;
break;
case '2':
ramHDD = 160;
break;
case '3':
ramHDD = 240;
break;
case '4':
ramHDD = 320;
break;
case '5':
ramHDD = 400;
break;
case '6':
ramHDD = 480;
break;
}
plus = diskPrice + cpuHDD + ramHDD;
sum.innerHTML = plus;
}
</script>
</body>
</html>Функция хорошо работает с input select, но нужно сделать выбор доп места на диске мин 30гб макс 500гб с шагом в 10гб по 20р за каждые 10гб.
Я решил сделать с помощью input range, потому что если делать с селектами то в функции будет 48 штук case. Не кайф их писать. Подскажите как проще посчитать цену в input range за выбранное кол-во памяти. Если решу с этим то и остальные параметры сделаю через input range. Так будет компактнее
.gif)