lQuestl пишет:Здравствуйте, формумчане!
Прошу вашей помощи. Буду благодарен за любую помощь.
На сайте хочу сделать калькулятор цен. Приведу пример, как должен работать.
Пример:
1 строчка - выпадающее список "список продуктов" порядка 20 продуктов.
2 строчка - выпадающее список "тип продукта" например продление или новая. цена зависит от типа продукта.
3. выбрать диапазон устройств. цена тоже зависит от диапазона.
4. строчка - указывают количество
5. строчка выводит стоимость продукта.
Сценарий - выбрал продукт- указал тип скидки (новая или продление) - выбрал диапазон - указал количество.
калькулятор показал стоимость.
Как пример https://www[dot]kaspersky[dot]ru/small-t[dot][dot][dot]s-security/cloud
При выборе количества считается цена, только тут уже выбран продукт. У меня их будет более 20шт.
Заранее спасибо.
Доброе утро!
Мне кажется, что в начале должен выбираться "тип продукта", а затем "список продуктов", но это не столь важно.
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>
Удачи!(Отредактировано автором: 21 Ноября, 2017 - 08:18:28)
|