+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Online калькулятор для сайта jQuery

В этой статье мы расскажем как реализовать на сайте online калькулятор. Для чего он нужен? Калькулятор позволяет посетителю сайта самостоятельно, в онлайн режиме посчитать стоимость товаров или услуг. Для примера мы возьмем свадебную тематику. Пользователь заходит на наш сайт и мы предлагаем ему рассчитать примерный бюджет. Удобно и понятно без лишних звонков, заполнений форм, обращений к консультантам.

Для начала подключаем библиотеку jQuery и пишем код, который будет суммировать выбранные пункты.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
$(function(){
$("#price").click(function(){
var sum=0; // начальное значение можно указать любое
$('#price :checked').each(function(){
sum+=parseInt($(this).val());
});
$('.sum').text(sum);
});
});
</script>
Теперь сама форма
<div id="price">
<input type="checkbox" id="box1" name="box1" value="10000"><label for="box1">Фотограф - 10000 руб.</label><br />
<input type="checkbox" id="box2" name="box2" value="15000"><label for="box2">Тамада - 15000 руб.</label><br />
<input type="checkbox" id="box3" name="box3" value="3000"><label for="box3">Аренда лимузина - 3000 руб.</label><br />
<input type="checkbox" id="box4" name="box4" value="2500"><label for="box4">Украшение зала- 2500 руб.</label><br />
</div>
<p>Итого: <span class="sum">0</span> руб.</p>
Вот так легко и просто.

Демонстрация


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 5224