Калькулятор цін для потенційних клієнтів
Моїй студії знадобився онлайн калькулятор цін, для клієнтів. Все тому, що просто набридло кожному вважати окремо, адже працюємо модульно. Тому було вирішено написати його своїми руками. Що буде в нашому калькуляторі:
- Швидке завантаження певної форми для кожного типу сайту;
- Швидкий підрахунок загальної суми залежно від вартості обраного модуля (з урахуванням ПДВ та без);
Для початку структура головної сторінки (index.html):
Залежно від того, який пункт вибере користувач з select з ідентифікатором type_site, буде завантажена відповідна форма в блок config_site. У абзаци з ідентифікаторами summ і summ_nds будуть завантажуватися в область span підсумкові суми.
Тепер подивимося на обробник (під ім'ям fullform.php), який буде формувати форми:
Зверніть увагу, що в залежності від переданої змінної option і буде завантажена відповідна форма. У кожній формі у нас знаходиться практично всі типи полів input: чекбокси, СЕЛЕКТА і текстові. Для кожного типу у нас буде свій невеликий обробник.
Так само зверніть на inputCell, їх може бути кілька, але найважливіше в них це атрибут name, в якому буде зберігатися вартість за 1. В інших полях в атрибуті value зберігається вартість модуля.
І пишемо в ньому наступне:
У другому рядку ми запускаємо функцію, яка буде обробляти зміни в формі, і задаємо дві змінні для даної функції. Перша змінна зберігає в собі значення, яке ми будемо передавати fullform.php у вигляді option, друга зберігає коротка назва блоку div з ідентифікатором config_site. Потім Обнуляємо значення в поле span абзаців, де буде виводитися підсумкова сума - це дозволить нам обнуляти кожен раз значення при виборі іншого типу сайту. В останньому рядку ми завантажує в config_site форми по переданому параметру option.
Відмінно форму ми завантажили, тепер треба обробити дані з неї, причому так само динамічно:
Так як у нас форма подгружается динамічно, то отже у нас з'являються нові елементи DOM, які простим способом не обробити, а отже не вийде просто використовувати функцію change. На допомогу тут приходить функція live, яка обробляє нові елементи DOM і може вже обробляти їх функцією change.
Далі ми створюємо дві змінні, в яких будуть зберігатися фінальні суми для ПДВ і немає. І в третю змінну заносимо вартість обраної CMS, потім відразу її складовими із загальною сумою.
Використовуємо функцію each для перебору всіх полів введення з ідентифікатором inputCell, де в циклі перемножуємо перекладені в цілочисельні значення за допомогою команди parseInt атрибути name і value кожного поля.
Далі нам треба обробити всі відмічені чекбокси:
Тут той же принцип, що і в попередньому коді, але тільки тут ми визначаємо виділені чекбокси і отримуємо їх значення, а потім складаємо його із загальною сумою. Залишилося тільки вивести суми:
Для обчислення ПДВ totalSum множимо на 1.18 і далі в тег span відповідних абзаців виводимо текст з значенням наших сум.
Все калькулятор готовий.
5 останніх уроків рубрики "jQuery"
Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.
jQuery плагін для створення тимчасової шкали.
jQuery плагін для створення діаграми Ганта.
Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.
Кілька доопрацьований і збільшений калькулятор я зробив собі на студійний сайт - www.paintsstudio.com/calc.php. Клієнти сказали спасибі. Річ дієва.
Misterio1984
Чудова необхідна річ! Величезне спасибище! Retweet!
Згоден! Величезне спасибі.
RealVect0r
Ще один аргумент на користь цін - у нас в місті тільки вище ціни. Плюс підняли ЄСП до 34%. Так що нічого дивного. А знижки прикрутити не проблема. Можна наприклад порахувати, що якщо 5 чеків виділено то 5% надати :)
s_koshkin
Понатискавши на вибірку сайт безкоштовно кілька разів, я собі не тільки знижку зроблю, але і ви мені залишитеся повинні.
Ще б додати форму відправки обраного замовлення. Ну не Принтскрін ж замовнику робити! ))
так це не форма замовлення, це просто наполегливої роботи, для ознайомлення з цінами на послуги
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!