В данном уроке я покажу как сделать простой калькулятор с одной формой. В данном уроке есть некоторые отличия от предыдущего калькулятора следующими моментами:
Мы не используем функцию live для изменения DOM-структуры;
Наша форма полностью готова к отправке (кнопку всегда можете добавить сами);
Форма считает не только итоговую сумму, но и суммы по позициям и выводит их на экран.
Для начала взглянем на саму форму и рассмотрим ее особенности:
<table id="tableSelect" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td>Ведущий</td>
<td class="vertical">Часы</td>
<td>
<select id="pos_1" name="veduschiy">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td id="pos_1_price" class="vertical">3000</td>
<td id="pos_1_count">0</td>
</tr>
<tr>
<td>Банкетный зал</td>
<td class="vertical">Человек</td>
<td>
<input id="pos_2" name="people" type="text">
</td>
<td id="pos_2_price" class="vertical">2000</td>
<td id="pos_2_count">0</td>
</tr>
<tr>
<td>Теплоход</td>
<td class="vertical">Человек</td>
<td>
<input id="pos_3" name="people_t" type="text">
</td>
<td id="pos_3_price" class="vertical">3000</td>
<td id="pos_3_count">0</td>
</tr>
<tr>
<td>Видеосъемка</td>
<td class="vertical">Часов</td>
<td>
<select id="pos_4" name="video">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td id="pos_4_price" class="vertical">2500</td>
<td id="pos_4_count">0</td>
</tr>
<tr>
<td>Украшение шарами</td>
<td class="vertical">-</td>
<td>
<select id="pos_6" name="bubbles">
<option value="0">Нет</option>
<option value="1">Да</option>
</select>
</td>
<td id="pos_6_price" class="vertical">5000</td>
<td id="pos_6_count">0</td>
</tr>
</tbody>
</table>
Обратите внимание на то, что каждый элемент формы, независимо от его типа, имеет идентификатор вида pos_номер. Это нам поможет в написании кода jQuery. Так же обратите внимание на то, что смежные ячейки для каждого пункта имеют так же идентификаторы вида pos_номер_price и pos_номер_count. В pos_номер_price у нас будет храниться стоимость по позиции за единицу, а в pos_номер_count выводиться итоговая сумма по позиции.
Так же не забываем подключить к странице jQuery. Без него у нас ничего не получится. Сразу стоит сказать, что я не буду делать различные проверки на введенные пользователем данные в текстовые поля дабы не засорять код лишней информацией. На сайте подобных уроков достаточно. Мы же приступаем к нашему коду:
$(document).ready(function() {
//Немного оформления в стиле зебры
$("#calculate").find("tr:odd").css({"background":"#fbdd59", "opacity":"0.8"});
//Калькулятор
$("#tableSelect").change(function() {
var totalSum = 0;
$("input[id^='pos'], select[id^='pos']").each(function() {
var idElement = "#"+$(this).attr("id"), //Получаем id элемента
priceField = parseInt($(idElement+"_price").text()), //Стоимость позиции
countField = parseInt($(this).val()); //значение элемента
$(idElement+"_count").text(priceField * countField); //Выводим сумму по позиции
totalSum += priceField * countField;
});
$("#count_price span").text(totalSum);
});
});
На строчку дизайна не обращаем внимания и сразу приступаем к изучению кода. В первой строке указываем то, что мы обрабатываем любые изменения в таблице tableSelect. Полную сумму сразу же приравниваем к 0.
А теперь смотрим внимательно - $("input[id^='pos'], select[id^='pos']").each позволяет для каждого select и input у которых id начинается на pos выполнить соответствующие действия и уже внутри функции each мы указываем, то что мы хотим сделать. Для начала задаем переменные:
idElement = "#"+$(this).attr("id") - создаем переменную idElement, которая нам позволит определять смежные поля с родственными идентификаторами.
priceField = parseInt($(idElement+"_price").text()) - получаем стоимость по позиции из ячейки с родственными идентификатором и переводим текст находящийся в ней в число.
countField = parseInt($(this).val()) - получаем значение введенное пользователем и так же переводим его в число
Дальше все просто. Нам нужно в поле Сумма по позиции вывести итоговое число, а так же обновить общую стоимость.
$(idElement+"_count") - позволяет нам определить в какую ячейку вписывать значение, а строчка ниже обновляет итоговую сумму на Сумму по позиции. И самая последняя строка позволяет ее вывести на экран.
Вот собственно и все. Так же в эту форму можно добавить и радиокнопки и группы флажков. Главное соблюдать нумирацию при формировании таблицы и элементов формы, тогда проблем возникнуть не должно.