Моей студии понадобился онлайн калькулятор цен, для клиентов. Все потому, что просто надоело каждому считать отдельно, ведь работаем модульно. Поэтому было решено написать его своими руками. Что будет в нашем калькуляторе:
Быстрая загрузка определенной формы для каждого типа сайта;
Быстрый подсчет общей суммы в зависимости от стоимости выбранного модуля (с учетом НДС и без);
demosourse
Для начала структура главной страницы (index.html):
<div id="full_calc">
<form>
<div id="type_of_site">
<p>Выберите тип сайта</p>
<p>
<select id="type_site">
<option value='0'>Выберите тип сайта</option>
<option value='1'>Визитка</option>
<option value='2'>Корпоративный</option>
</select>
</p>
</div>
<p id="tipus"></p>
<div id="config_site">
</div>
</form>
</div>
<p id="summ">Стоимость сайта: <strong><span></span></strong> р.</p><br><p id="summ_nds">Стоимость сайта для организаций плательщиков НДС: <strong><span></span></strong> р.</p>
В зависимости от того, какой пункт выберет пользователь из select с идентификатором type_site, будет загружена соответствующая форма в блок config_site. В абзацы с идентификаторами summ и summ_nds будут загружаться в область span итоговые суммы.
Теперь посмотрим на обработчик (под именем fullform.php), который будет формировать формы:
<?
if (isset($_POST["option"])) {
$option = $_POST["option"];
if ($option == 1) {
print '
<h3>Сайт визитка</h3>
<div id="design">
<p><strong>Дизайн:</strong></p>
<p><input checked disabled type="checkbox" name="" value="6000">Шаблон (6000 р.) <br>
<span>Шаблон рисуется на основании составленного брифа и соответствует требованиям заказчика.</span></p>
<p><input checked disabled type="checkbox" name="" value="4500">HTML-верстка (4500 р.) <br>
<span>На основании утвержденного шалона создается рабочий макет.</span></p>
<p><input type="checkbox" name="" value="1500">Разработка логотипа (1500 р.) <br>
<span>Логотип разрабатывается исходя из предпочтений заказчика.</span></p>
<p><input type="checkbox" name="" value="3000">Разработка шрифтов (4000 р.) <br>
<span>Разработка фирменных шрифтов предназначена для придания индивидуальности стилевому оформлению сайта.</span></p>
<p><strong>Наполнение сайта:</strong></p>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="270px">Услуги копирайтинга (1 страница)</td>
<td><input id="inputCell" name="300" size="1" type="text" value="0"> 300 р.</td>
</tr>
</table>
</div>
<div id="programming">
<p><strong>Программирование:</strong></p>
<p>Система управления сайтом (от 4000 р.) <br>
<span>При выборе CMS вы сможете выбрать какую конкретно CMS использовать.</span></p>
<p><select id="cms_radio">
<option value="0">Не использовать</option>
<option value="4000">CMS jADM (4000 р.)</option>
<option value="8000">Amiro.CMS: Визитка (8000 р.)</option>
<option value="6000">Joomla! (6000 р.)</option>
<option value="14000">1С-Битрикс: Старт (14000 р.)</option>
<option value="0">Другая (в зависимости от сложности)</option>
</select></p>
<p><input type="checkbox" name="" value="1000">Форма отправки писем (1000 р.) <br>
<span>Установка простой формы отправки писем или заявок посетителей. Простая форма содержит до 5 полей для ввода текста (Ф.И.О. отправителя, контактный телефон, e-mail, дополнительная информация и т.п.). Сообщение приходит на электронную почту в текстовом формате. Позволяет привести запросы посетителей к единой форме и избежать СПАМа.</span></p>
<p><input type="checkbox" name="" value="3000">Лента новостей (3000 р.) <br>
<span>Лента новостей с автоматической разбивкой по страницам, сортировкой по дате, возможностью самостоятельно добавлять, редактировать, удалять новости, вывод необходимого количества последних новостей на главную страницу, новости автоматически отображаются по 10 новостей на страницу с возможностью посмотреть новость более подробно, внизу идут ссылки 1, 2, 3... на страницы архива новостей.</span></p>
<p><input type="checkbox" name="" value="9000">Поиск по сайту (9000 р.) <br>
<span>Модуль поиска совпадений по словам и фразам на страницах сайта.</span></p>
</div>';}
if ($option == 2) {
print '
<h3>Корпоративный сайт</h3>
<div id="design">
<p><strong>Дизайн:</strong></p>
<p><input checked disabled type="checkbox" name="" value="10000">Шаблон (10000 р.) <br>
<span>Шаблон рисуется на основании составленного брифа и соответствует требованиям заказчика.</span></p>
<p><input checked disabled type="checkbox" name="" value="8000">HTML-верстка (8000 р.) <br>
<span>На основании утвержденного шалона создается рабочий макет.</span></p>
<p><input type="checkbox" name="" value="1500">Разработка логотипа (1500 р.) <br>
<span>Логотип разрабатывается исходя из предпочтений заказчика.</span></p>
<p><input type="checkbox" name="" value="3000">Разработка шрифтов (4000 р.) <br>
<span>Разработка фирменных шрифтов предназначена для придания индивидуальности стилевому оформлению сайта.</span></p>
<p><strong>Наполнение сайта:</strong></p>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="270px">Услуги копирайтинга (1 страница)</td>
<td><input id="inputCell" name="300" size="1" type="text" value="0"> 300 р.</td>
</tr>
</table>
</div>
<div id="programming">
<p><strong>Программирование:</strong></p>
<p>Система управления сайтом (от 4000 р.) <br>
<span>При выборе CMS вы сможете выбрать какую конкретно CMS использовать.</span></p>
<p><select id="cms_radio">
<option value="0">Не использовать</option>
<option value="4000">CMS jADM (4000 р.)</option>
<option value="12000">Amiro.CMS: Корпоративный (12000 р.)</option>
<option value="6000">Joomla! (6000 р.)</option>
<option value="23000">1С-Битрикс: Корпоративный (23000 р.)</option>
<option value="0">Другая (в зависимости от сложности)</option>
</select></p>
<p><input type="checkbox" name="" value="1000">Форма отправки писем (1000 р.) <br>
<span>Установка простой формы отправки писем или заявок посетителей. Простая форма содержит до 5 полей для ввода текста (Ф.И.О. отправителя, контактный телефон, e-mail, дополнительная информация и т.п.). Сообщение приходит на электронную почту в текстовом формате. Позволяет привести запросы посетителей к единой форме и избежать СПАМа.</span></p>
<p><input type="checkbox" name="" value="3000">Лента новостей (3000 р.) <br>
<span>Лента новостей с автоматической разбивкой по страницам, сортировкой по дате, возможностью самостоятельно добавлять, редактировать, удалять новости, вывод необходимого количества последних новостей на главную страницу, новости автоматически отображаются по 10 новостей на страницу с возможностью посмотреть новость более подробно, внизу идут ссылки 1, 2, 3... на страницы архива новостей.</span></p>
<p><input type="checkbox" name="" value="6000">Лента RSS (6000 р.) <br>
<span>Подключение новостной ленты сайта к RSS-каналу. На сайте размещается скрипт, генерирующий список новостей в формате RSS для всех желающих подписаться, или позволяющий подключать и выводить новости сторонних сайтов</span></p>
<p><input type="checkbox" name="" value="8000">Портфолио (8000 р.) <br>
<span>Портфолио позволяет размещать примеры выполненных работ в структурированном виде.</span></p>
<p><input type="checkbox" name="" value="4000">Фотогалерея (4000 р.) <br>
<span>Данный модуль предоставляет возможность выводить фотографии и изображения в автоматическом режиме, менять фон страницы при просмотре фотографии, голосовать за фотографию, просматривать лидеров голосования.</span></p>
<p><input type="checkbox" name="" value="9000">Поиск по сайту (9000 р.) <br>
<span>Модуль поиска совпадений по словам и фразам на страницах сайта.</span></p>
</div>';}
}
?>
Обратите внимание, что в зависимости от переданной переменной option и будет загружена соответствующая форма. В каждой форме у нас находится практически все типы полей input: чекбоксы, селекты и текстовые. Для каждого типа у нас будет свой небольшой обработчик.
Так же обратите на inputCell, их может быть несколько, но самое важное в них это атрибут name, в котором будет храниться стоимость за 1. В остальных полях в атрибуте value хранится стоимость модуля.
Теперь нам необходим обработчик, который все это оживит. Для этого создаем новый JavaScript файл scripts.js и подключаем его вместе с фреймворком jQuery к index.html:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scripts.js"></script>
И пишем в нем следующее:
$(document).ready(function() {
$("#type_site").change(function() {
var typeOfSite = $("#type_site :selected").val(),
formOftype = $("#config_site");
/* Обнуляем общую и сумму с НДС в поле вывода */
$("#summ span").text("0");
$("#summ_nds span").text("0");
/* Выбираем соответствующую форму из файла */
formOftype.load("fullform.php",{option:typeOfSite});
Во второй строке мы запускаем функцию, которая будет обрабатывать изменения в форме, и задаем две переменные для данной функции. Первая переменная хранит в себе значение, которое мы будем передавать fullform.php в виде option, вторая хранит краткое название блока div с идентификатором config_site. Затем обнуляем значения в поле span абзацев, где будет выводиться итоговая сумма – это позволит нам обнулять каждый раз значение при выборе другого типа сайта. В последней строке мы выполняем загрузку в config_site формы по переданному параметру option.
Отлично форму мы загрузили, теперь надо обработать данные из нее, причем так же динамически:
/* Выбираем все чекбоксы которые были подгружены, в этом нам поможет функция live */
formOftype.live("change",function() {
/* При проведении действий пересчитываем сумму в зависимости от выбраных чекбоксов */
var totalSum = 0, /* Полную сумму сначала приравниваем к нулю */
totalSumNDS = 0,
choiceCMS = parseInt($("#cms_radio :selected").val());
/* Приплюсовываем сумму стоимости CMS */
totalSum += choiceCMS;
/* Каждое поле ввода проверяем на введеное значение, если больше нуля то считаем его */
$("#inputCell").each(function() {
var inputCell = parseInt($("#inputCell").val()) * parseInt($("#inputCell").attr("name"));
totalSum += inputCell;});
Так как у нас форма подгружается динамически, то следовательно у нас появляются новые элементы DOM, которые простым способом не обработать, а следовательно не получится просто использовать функцию change. На помощь здесь приходит функция live, которая обрабатывает новые элементы DOM и может уже обрабатывать их функцией change.
Далее мы создаем две переменные, в которых будут храниться финальные суммы для НДС и нет. И в третью переменную заносим стоимость выбранной CMS, затем сразу ее складываем с общей суммой.
Используем функцию each для перебора всех полей ввода с идентификатором inputCell, где в цикле перемножаем переведенные в целочисленные значения с помощью команды parseInt атрибуты name и value каждого поля.
Дальше нам надо обработать все отмеченные чекбоксы:
/* Пересчитываем все чекбоксы которые отмечены галочкой*/
$(this + "input[name=''] :checked").each(function() {
totalSum += parseInt($(this).val());
});
Здесь тот же принцип, что и в предыдущем коде, но только тут мы определяем выделенные чекбоксы и получаем их значение, а затем складываем его с общей суммой. Осталось только вывести суммы:
/* Подсчет и вывод итоговой суммы с НДС и без */
totalSumNDS = totalSum * 1.18 ;
$("#summ span").text(totalSum);
$("#summ_nds span").text(totalSumNDS);
});
});
});
Для вычисления НДС totalSum умножаем на 1.18 и далее в тег span соответствующих абзацев выводим текст с значением наших сумм.
Все калькулятор готов.