Статьи

Калькулятор стоимости на JavaScript

При создании интернет сайтов очень часто заказчик просит разместить калькулятор стоимости его услуг. Он предоставляет исполнителю формулу, по которой считается стоимость, или табличку с ценами.

Калькулятор стоимости очень удобная вещь для посетителей сайта. С ее помощью потенциальный клиент может узнать сколько стоит то, что ему требуется, помимо этого посетитель дольше задерживается на сайте, и возрастает вероятность что он воспользуется именно Вашими услугами.

Для разработки калькулятора стоимости воспользуемся HTML и JavaScript (при расчете стоимости можно использовать php, но с ним страница будет перезагружаться, а с JavaScript подсчет цен будет без перезагрузки страницы). Сделаем калькулятор расчета стоимости дизайна сайта. Аналогичный калькулятор Вы сможете посмотреть в разделе стоимость дизайна сайта.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Калькулятор на JavaScript</title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
        <script type="text/javascript">
       /*
        * Функция подсчета стоимости услуг на создания дизайна сайта
        */
        function calc() {
            //получаем ссылку на элемент Select (Тип дизайна)
            var type_design = document.getElementById("type_design");
            //получаем ссылку на чекбокс (Требуется верстка?)
            var is_html = document.getElementById("is_html");
            //получаем ссылку на элемент input (Кол-во вариантов)
            var count = document.getElementById("count");
            //получаем ссылку на элемент span, в него будем писать стоимость дизайна
            var result = document.getElementById("result"); 

            var price = 0;
            price += parseInt(type_design.options[type_design.selectedIndex].value);
            price += (is_html.checked == true) ? parseInt(is_html.value) : 0;
            price = parseInt(count.value) * price;

            result.innerHTML = price;
        } 
</script>
    </head>
    <body>
        <b>Тип дизайна:</b><br/>
        <select onchange="calc()" id="type_design">
            <option value="0">Выбрать</option>
            <option value="5000">Простой дизайн сайта</option>
            <option value="7000">Сложный дизайн сайта</option>
            <option value="10000">Дизайн интернет-магазина</option>
        </select><br/>
        <input type="checkbox" onchange="calc()" value="3000" id="is_html" />
        <label for="is_html">Требуется верстка?</label>
        <br/>
        Кол-во вариантов: <input type="text" id="count" value="1" onchange="calc()" />
        <div>Стоимость дизайна сайта: <span id="result">0</span> руб.</div>
    </body>
</html>
Скачать исходник
Содержание
Размещение любых материалов с сайта OX2.ru на других сайтах, блогах, печатных изданиях и т.д. ссылка на сайт http://ox2.ru/ обязательна!

Оставить вопрос или комментарий

Виктор [13.10.2011 13:12]
Почему не считает сумму при изменении параметра в текстовом поле? Спасибо.

<input type="text" id="count" value="1" onchange="calc()" />
Администратор OX2 [13.10.2011 15:00]
Скрипт считает когда текстовое поле теряет фокус. Чтобы подсчет был во время нажатии клавиши, вместо onChange используйте onkeypress.
Виктор [14.10.2011 08:42]
Спасибо!
Илья [28.10.2011 10:10]
Подскажите как сделать чтоб он считал не только целые числа
Администратор OX2 [28.10.2011 14:31]
Нужно заменить во всех местах функцию "parseInt" на "parseFloat"
Ramesh [19.11.2011 11:02]
а почему когда добавил еще <input type="checkbox" onchange="calc()" value="3000" id="is_html" /> <label for="is_html">Требуется верстка?</label>
<br/>
он их не сумирует ? Заранее спасибо !
Ramesh [19.11.2011 11:03]
Спасибо сам нашел решение :) надо просто внутри ДЖава скрипта тоже добавлять это ...
Ramesh [19.11.2011 19:14]
Подскажите пожалуйста как можно сделать так чтоб например сделать варианты для вопроса "Нужна верстка?" и вариант "Нет" или "Да" и если выбрать "Да" чтоб открывались дополнительные опции.. :)
Sem [20.11.2011 15:32]
Доброго времени суток!
У меня есть следующий вопрос: в этом примере цена закреплена в value, а можно сделать так чтобы вместо value можно было использовать например cena?
Администратор OX2 [24.11.2011 10:58]
Ответ Ramesh`y:

Смотри, можно например так:

<input type="radio" value="1" id="yes" name="is_html" onchange="if (this.checked) document.getElementById('options').style.display = 'block';" /> <label for="yes">Да</label>
<input type="radio" value="2" id="no" name="is_html" onchange="if (this.checked) document.getElementById('options').style.display = 'none';" /> <label for="no">Нет</label>

<div style="display: none" id="options">
<h2>Дополнительные опции</h2>
</div>
Администратор OX2 [24.11.2011 11:03]
Ответ Sem`y:

Можно, но это не очень правильно, т.к. по спецификации у элемента Option нет атрибута "cena".

Тебе нужно вместо:
price += parseInt(type_design.options[type_design.selectedIndex].value);

Написать:
price += parseInt(type_design.options[type_design.selectedIndex].getAttribute('cena'));

Вот примерчик:
<select onchange="alert(this.options[this.selectedIndex].getAttribute('cena'))" id="type_design">
<option cena="0">Выбрать</option>
<option cena="5000">Простой дизайн сайта</option>
<option cena="7000">Сложный дизайн сайта</option>
<option cena="10000">Дизайн интернет-магазина</option>
</select>
Spider [14.12.2011 01:52]
Доброго времени суток.
Хочу "прикрутить" этот калькулятор к форме заказа, но боюсь, что это не совсем правильно, может посоветуете или как грамотнее "спарить" форму и калькулятор (два в одном) или как-то иначе.
Кусок моего кода:
<strong>Город проведения мероприятия <span class="warning">*</span></strong><br>
<span class="style2">Возможен выезд в любую точку Беларуси</span><br>
<label>
<input type="radio" name="city" value="Minsk" />
Минск</label>
<br />
<label>
<input type="radio" name="city" value="Brest" />
Брест</label>
<br />
<label>
<input type="radio" name="city" value="Vicebsk" />
Витебск</label>
<br />
<label>
<input type="radio" name="city" value="Gomel" />
Гомель</label>
<br />
<label>
<input type="radio" name="city" value="Grodno" />
Гродно</label>
<br />
<label>
<input type="radio" name="city" value="Mogilev" />
Могилёв</label>
<br />
</p>

Так вот, хочу, что бы при выборе городов калькулятор (вообще в форме не только города выбирать приходится) добавлял в итоге заданные мною цифры (в города заложу цену за топливо, что бы туда доехать).
axle0vega [18.01.2012 14:56]
Добрый вечер.
В моем случае присутствует несколько переменных типа type_design. Подскажите, как правильно посчитать их сумму?
Катерина [19.01.2012 11:02]
Здравствуйте!
А как сделать, чтобы при выборе пункта из выпадающего меню (у вас тип дизайна) общая сумма умножалась на определённое число?
Администратор OX2 [19.01.2012 11:13]
Добрый день!
Ответ для axle0vega:

1. Сделайте еще один select, только id ему дайте type_design_2:

<select onchange="calc()" id="type_design_2">
...
</select>
2. В JS-коде допишите (под var price = 0;):
var type_design_2 = document.getElementById("type_design_2");
price += parseInt(type_design_2.options[type_design_2.selectedIndex].value);
Администратор OX2 [19.01.2012 11:15]
Ответ для Катерины:

Измените следующую строчку (в js-коде):

price += parseInt(type_design.options[type_design.selectedIndex].value);

на:

price += parseInt(type_design.options[type_design.selectedIndex].value) * 200;

где 200 - это число, на которое необходимо умножать
Катерина [19.01.2012 11:23]
Здравствуйте!
А как сделать, чтобы при выборе пункта из выпадающего меню (у вас тип дизайна) общая сумма умножалась на определённое число?
Катерина [19.01.2012 11:24]
Извините)

Спасибо!))
Катерина [19.01.2012 11:48]
Извините)

Спасибо!))
axle0vega [25.01.2012 13:09]
Спасибо!

А не подскажите, для чего в строке
price += (laminat.checked == true) ? parseInt(laminat.value) : 0;
в конце пишется : 0 ?
Администратор OX2 [25.01.2012 13:15]
Смотрите, выражение

price += (laminat.checked == true) ? parseInt(laminat.value) : 0;

Полный аналог:

if (laminat.checked == true) {
price += parseInt(laminat.value);
}
else {
price += 0;
}

То есть 0 прибовляем если laminat.checked не равно true
axle0vega [25.01.2012 17:43]
Большое спасибо :)
Руслан [20.03.2012 23:28]
Господа скрпит просто прекрасный, спасибо.
У меня вопрос:
Вот мой код:

<b>Кабель:</b><br/>
<select id="type_design2" onchange="calc()">
<option value="0">не нужен</option>
<option value="35">протяжка в земле</option>
<option value="49">протяжка на дереве</option>
<option value="12">просто бросить</option>
</select><br/>
<br/>
Кол-во метров: <input type="text" id="count2" value="1" onchange="calc()" />

Как мне сделать так: чтобы когда вводишь количество метров считалась сумма?То есть должно быть умножение товара на введенное количество.
Я в упор не могу понять, что в коде нужно дописать.
Вернее я понимаю, что нужно что-то в скрипте дописывать. Но, что именно не понимаю. Заранее спасибо
Павел [08.04.2012 13:38]
Парни, а мне надо скрипт, что бы в 1 поле писал число, затем нажимал на кнопку,и во втором поле писалось 80 процентов от этого числа....Ну то есть рассчитывало 80 процентов, не могли бы помочь?
Алекс [15.04.2012 14:50]
Прикрутил function checkOnly(ele){
var frm = ele.form;
for (var i=0; i<frm.elements.length; i++){
if (frm.elements[i].name == ele.name){
if (frm.elements[i] != ele){
frm.elements[i].checked = false;
}
}
}
}
ПРИ ОДИНАКОВЫХ ИМЕНАХ ИНПУТОВ, МОЖНО ВЫБРАТЬ ТОЛЬКО ОДИН. НО ЭТО НЕ РАБОТАЕТ С ВАШИМ КАЛЬКУЛЯТОРОМ В ИЕ9. НЕ ПОДСКАЖИТЕ ПОЧЕМУ?
Администратор OX2 [17.04.2012 17:09]
А попробуйте вместо frm.elements использовать DOM (childNodes)
ali [15.05.2012 05:32]
сделал всё как описано но работает с багами, если 2 ввести ли 3, то только со второго раза считает

<head>
<title>Калькулятор на JavaScript</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=windows-1251\" />
<script type=\"text/javascript\">

/*
* Функция подсчета стоимости услуг на создания дизайна сайта
*/
function calc() {
var type_design = document.getElementById(\"type_design\"); //получаем ссылку на элемент Select (Тип дизайна)
var is_html = document.getElementById(\"is_html\"); //получаем ссылку на чекбокс (Требуется верстка?)
var count = document.getElementById(\"count\"); //получаем ссылку на элемент input (Кол-во вариантов)
var result = document.getElementById(\"result\"); //получаем ссылку на элемент span, в него будем писать стоимость дизайна

var price = 0;
price += parseFloat(type_design.options[type_design.selectedIndex].value);
price += (is_html.checked == true) ? parseFloat(is_html.value) : 0;
price = parseFloat(count.value) * price;

result.innerHTML = price;
}

</script>
</head>
<body>
<b>Тип дизайна:</b><br/>
<select onchange=\"calc()\" id=\"type_design\">
<option value=\"10\">Выбрать</option>
<option value=\"1.2\">Простой дизайн сайта</option>
<option value=\"2\">Сложный дизайн сайта</option>
<option value=\"3\">Дизайн интернет-магазина</option>
</select><br/>
<input type=\"checkbox\" onchange=\"calc()\" value=\"3000\" id=\"is_html\" /> <label for=\"is_html\">Требуется верстка?</label>
<br/>
Кол-во вариантов: <input type=\"text\" id=\"count\" value=\"1\" onkeypress=\"calc()\" />
<div>Стоимость дизайна сайта: <span id=\"result\">0</span> руб.</div>
</body>
</html>
Администратор OX2 [16.05.2012 10:45]
Вы что-то не так делаете. Скачайте исходник, там все с первого раза считает
Имя:
Сообщение: