Форумы портала PHP.SU :: Версия для печати

1. lQuestl - 20 Ноября, 2017 - 20:28:41 - перейти к сообщению

Здравствуйте, формумчане!
Прошу вашей помощи. Буду благодарен за любую помощь.
На сайте хочу сделать калькулятор цен. Приведу пример, как должен работать.
Пример:
1 строчка - выпадающее список "список продуктов" порядка 20 продуктов.
2 строчка - выпадающее список "тип продукта" например продление или новая. цена зависит от типа продукта.
3. выбрать диапазон устройств. цена тоже зависит от диапазона.
4. строчка - указывают количество
5. строчка выводит стоимость продукта.
Сценарий - выбрал продукт- указал тип скидки (новая или продление) - выбрал диапазон - указал количество.
калькулятор показал стоимость.

Как пример https://www[dot]kaspersky[dot]ru/small-t[dot][dot][dot]s-security/cloud
При выборе количества считается цена, только тут уже выбран продукт. У меня их будет более 20шт.

Заранее спасибо.

2. Vladimir Kheifets - 21 Ноября, 2017 - 08:15:28 - перейти к сообщению

lQuestl пишет:

Доброе утро!
Мне кажется, что в начале должен выбираться "тип продукта", а затем "список продуктов", но это не столь важно.
1. Очевидно, что нужно сделать форму для ввода/выбора данных.
2. Если, Вы хотите чтобы работало как в примере, то Вам нужно для каждого
объекта обрабатывать событие связанные с измение значений.
3. Далее возможно два решения - как в Вашем примере, без перезагрузки формы,
либо с перезагрузкой. Перезагрузка необходима,в том случае, если требуется
выбирать данные из БД, использую введённые данные для генерации запросов.

Если необходимо перезагрузка, то всё просто. Ставите в каждый объект обработчик
onChange делаете submit формы.
Немного, сложнее, без перезагузки. Делется это, например, так:

CODE (html):
скопировать код в буфер обмена

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calculator</title>
<script>
//-------------------------------------------------------------------
function SetInnerHTML(id, v){
 if(isId(id))     
        window.document.getElementById(id).innerHTML = v;
}
//-------------------------------------------------------------------
function isId(elId){
    if(window.document.getElementById(elId))
        r=true;
    else
        r=false;    
    return r;    
}
//-------------------------------------------------------------------
function GetValueById(elId){
     if(isId(elId))
     {
              obj=window.document.getElementById(elId);
              t=obj.type;
              if(t.match(/^select/))
              {
                      ind = obj.selectedIndex;
                     opt = obj.options;
                     return opt[ind].value;
              }
              else
              {                      
                      return obj.value;
              }
     }
     else 
             return false;
}
//-------------------------------------------------------------------
function ChangePrice(){
A=GetValueById("A");
B=GetValueById("B");
P=A*B;
SetInnerHTML("price",P);
}
//-------------------------------------------------------------------
</script>
</head>
<body>
<form action=" " method="get">
<select name="A" id="A" onChange='ChangePrice()'>
<option>10</option>
<option>20</option>
<option>30</option>
</select>
<select name="B" id="B" onChange='ChangePrice()'>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</form/
Цена:
<div id="price"></div>
</body>
</html>

Удачи!