>>>ВОПРОСЫ НОВИЧКОВ<<<

345K
.

kantry, не получается)) я не понимаю в чём дело

.

kantry, исходный код php странички вставил в новую html и почему-то работает

.
Hey guys! Finally I'm gonna change status!?

Hat-Trik, Скачай jquery к себе на сайт и подключи, я те говорю он у тебя не подключен(или не подключается) почему то, смотри в консоль.

Прикрепленные файлы:
.
Hey guys! Finally I'm gonna change status!?
# Hat-Trik (07.08.2018 / 21:50)
kantry, исходный код php странички вставил в новую html и почему-то работает
А вот теперь попробуй убери из шапки все упоминания об xml, это допотопный Олег оставил допотопный код в хейдере
Перепиши на HTML5 шапку.
.
# kantry (07.08.2018 / 21:58)
Hat-Trik, Скачай jquery к себе на сайт и подключи, я те говорю он у тебя не подключен(или не подключается) почему то, смотри в консоль.
подключается же?
Прикрепленные файлы:
.
# kantry (07.08.2018 / 22:01)
Перепиши на HTML5 шапку.
Это поможет?
.
Hey guys! Finally I'm gonna change status!?

Hat-Trik, Я тебе показывал картинки с ошибками, это из jquery приходит ответ НЕ xml, надо лезть в библиотеку и... Но я бы туда не полез
Замени тип документа, и не парься, в xhtml слишком строгие правила, и похоже они где то нарушены.

.
¯\_(ツ)_/¯

Здравствуйте.
Мне нужно сделать что то типа калькулятора тарифа для виртуального сервера.
В таком виде что бы при выборе определенного параметра менялась сразу же цена на 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. Так будет компактнее
.

PaRtiZzaN,

код (+/-)



<?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()"><span id="disk">60</span>
</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;

ds=diskSpace*2;


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+ds;
sum.innerHTML = plus;
disk.innerHTML = diskSpace;

}

</script>
</body>
</html>

.
Hey guys! Finally I'm gonna change status!?

PaRtiZzaN, Раз у тебя 1Гиг стоит 2р, то к чему там case плодить?
Как то так можно сделать.

<form>
<p><select name="" id="hdd" onchange="fnc()">
	<option value="199">HDD 1</option>
    <option value="299">HDD 2</option>
</select></p>
<p><select name="" id="cpu" onchange="fnc()">
	<option value="0">not marked</option>
    <option value="100">CPU 1</option>
    <option value="300">CPU 2</option>
</select></p>
<p>
	<input type="range" id="rng" min="30" max="500" step="10" value="30" oninput="fnc()">
	<span id="space">30</span><span>&nbsp;Gb</span>
</p>
<p><span id="total_sum">259</span>&nbsp;<span>₽</span></p>
</form>


function fnc() {
  let hdd = parseInt(document.getElementById('hdd').value, 10);
  let cpu = parseInt(document.getElementById('cpu').value, 10);
  let rng = parseInt(document.getElementById('rng').value, 10);
  space.innerHTML = (rng);
  rng = rng * 2;
  let price = (hdd + cpu + rng);
  total_sum.innerHTML = (price);
}
Всего: 9861