Сегодня пользователи желают проверять сразу всю информацию на месте. Давайте установим калькулятор цен для Ваших клиентов.
Создадим структуру главной страницы:
<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>
<p id="summ_nds">Стоимость сайта для организаций плательщиков НДС: <strong><span></span></strong> р.</p>
Выбранный пункт из select с идентификатором type_site, загружает надлежащую форму в блок config_site.
Обработчик 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 будут находиться в каждой форме. Каждый тип будет иметь свой обработчик.
inputCel может быть несколько. Атрибут 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});
После загрузки формы, обрабатываем данные:
/* Выбираем все чекбоксы которые были подгружены, в этом нам поможет функция 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, которые нужно обработать функцией live.
Дальше создаются две переменные для хранения окончательных сумм НДС и не только. В третьей переменной заносится стоимость выбранной 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);
});
});
});
