Калькулятор цен для потенциальных клиентов

Моей студии понадобился онлайн калькулятор цен, для клиентов. Все потому, что просто надоело каждому считать отдельно, ведь работаем модульно. Поэтому было решено написать его своими руками. Что будет в нашем калькуляторе:

  1. Быстрая загрузка определенной формы для каждого типа сайта;
  2. Быстрый подсчет общей суммы в зависимости от стоимости выбранного модуля (с учетом НДС и без);

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>
<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 соответствующих абзацев выводим текст с значением наших сумм.

Все калькулятор готов.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Павлов Александр
Урок создан: 27 Января 2011
Просмотров: 115126
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 27 Января 2011 13:09
    alexxhub
    Несколько доработанный и увеличенный калькулятор я сделал себе на студийный сайт - www.paintsstudio.com/calc.php. Клиенты сказали спасибо. Вещь действенная.
    • 27 Января 2011 13:32
      Misterio1984
      Великолепная необходимая вещь! Огромное спасибище! Retweet!
      • 27 Января 2011 21:54
        procenko
        Согласен! Огромное спасибо.
    • 28 Января 2011 07:37
      RealVect0r
      Делал нечто похожее, но тогда было довольно мало знаний по jQuery, так что код более громоздкий получился. Зато у меня была система скидок. (Если интересно http://onflycms.ru/zakaz/onlain-kalkulyator) Цены Ваши конечно впечатлили. Надо наверно на такие же переходить =)
      • 28 Января 2011 09:02
        alexxhub
        Еще один довод в пользу цен - у нас в городе только выше цены. Плюс подняли ЕСН до 34%. Так что ничего удивительного. А скидки прикрутить не проблема. Можно например посчитать, что если 5 чеков выделено то 5% предоставить :)
      • 12 Марта 2012 21:53
        s_koshkin
        понажимав на выборку сайт бесплатно несколько раз,я себе не только скидку сделаю,но и вы мне останетесь должны.
    • 11 Апреля 2012 14:51
      taksist
      А вот рекламу делать нехорошо... ответ для alexxhub
  • 27 Января 2011 15:59
    s85n
    Еще бы добавить форму отправки выбранного заказа. Ну не принтскрин же заказчику делать! ))
    • 27 Января 2011 16:18
      Cheiz
      так это не форма заказа, это просто калькуль, для ознакомления с ценами на услуги
  • 27 Января 2011 16:11
    da_lamber
    Классная вещь
    • 20 Февраля 2013 11:23
      serj011
      ага)
  • 27 Января 2011 16:16
    Cheiz
    поиск по сайту 9000р :) жгете
    • 27 Января 2011 22:31
      alexxhub
      Мы его только установили и цены еще не фиксировали, честно говоря столько заказов что просто не успели. А вообще цены указаны примерно (смотрели как у других студий и честно говоря даже сбивали на 1000 - 1500).
      • 29 Января 2011 15:26
        Cheiz
        Молодцы, что бы ни было, лучше что то делать, чем ничего не делать...
    • 4 Февраля 2011 11:32
      Лев Нужный
      Ну как не кто не говорил что будет легко =)
  • 27 Января 2011 16:22
    So-author
    Как на заказ статья, самое время =) Супермегаспасибо!
  • 27 Января 2011 17:18
    AM0P
    Полезная штука!
  • 27 Января 2011 17:50
    notbot
    49 560 руб.
  • 27 Января 2011 18:58
    idsids
    Ура
  • 27 Января 2011 22:27
    vadik21
    причем это реальный калькулятор, реальной студии)) И цены тоже. А так конечно спасибо. Было интересно
  • 27 Января 2011 22:29
    Fizik
    помоему слабенько, делалось и лучше
    • 28 Января 2011 04:06
      alexxhub
      Показан лишь принцип, все кому нужно докрутят уже до необходимых им параметров. Еще пару дней и калькулятор уже будет готов вместе с формой заказа. Естественно я всего не показываю, а даю лишь направление. Часть секретов оставляю при себе :)
  • 27 Января 2011 22:59
    drupalerby
    Как в JQuery сделать выборку всех четных элементов списка кроме первого?
    • 28 Января 2011 04:05
      alexxhub
      Попробуйте вот так:
      #id :odd:not(:first)
      Т.е. каждый нечетный кроме первого.
  • 28 Января 2011 05:28
    kosbo
    Автор молодец. Полезный урок.
    • 28 Января 2011 06:32
      The Offspring
      Полностью согласен! Очень полезный урок=)
  • 28 Января 2011 08:27
    bakha123
    Помогите пожалуйста решить проблему! Как ограничить количество информации на одной странице документов? То есть чтоб не было так много а 10 к примеру, остальное разбивалось и шло на другие страницы
    • 29 Января 2011 13:39
      alexxhub
      Можно попробовать. Например позиции по тематике разнести во вкладки того же jQuery UI Tabs. Надо попробовать. Позже второй вариант предоставлю доработанный можем туда и этот момент включить.
  • 28 Января 2011 08:41
    artmart
    Отличная информация, можно будет еще доделать код для формы заказа - и он-лайн заказ услуг/товаров готов
    • 28 Января 2011 08:57
      alexxhub
      Дописываю корзину, позже будет.
      • 10 Октября 2011 07:40
        funky28
        Корзина уже готова? Как раз устанавливаю калькулятор. )
  • 28 Января 2011 08:56
    Furio
    В свое время сделал калькулятор на чистом javascript, по большому счету ничем не уступал этому. весил сам скрипт 12 кб. А вообще конечно полезный урок и довольно актуальный на сегодняшний день
  • 28 Января 2011 12:27
    sorrrrry
    Супер!!!Очень полезно и нужно.
  • 28 Января 2011 12:43
    Алексей Курпачёв
    Клёвая вещъ
  • 28 Января 2011 12:45
    Kolian
    alexxhub, ну ты красавчик, название придумал калькулятору, присвоил разработку себе, да ещё и 3500р просишь за него)) http://www.paintsstudio.com/index.php?mat=53&style=1
    • 29 Января 2011 12:25
      alexxhub
      А вы как хотели? Писалось своими силами все. Поэтому имеем полное право :) Причем тут вам представлен упрощенный вариант, у нас же уже более доработанный. Сегодня должен быть закончен с формой заказа. Или у вас появились сомнения что Павлов Александр и я разные люди? :) Тогда в контактах посмотрите кто стоит директором студии :)
  • 28 Января 2011 12:52
    Руслан Димитриев
    Пригодится!
  • 29 Января 2011 19:52
    Revy
    отличная вещь!! только цены в Демо убили просто )))
    • 29 Января 2011 23:49
      Kolian
      похоже ты не в курсе реальных цен, может тут немного не соответствует, но в целом цены слегка заниженные, в профессиональной студии цены будут повыше, вот тут можно посмотреть за какие деньги люди гоовы работать) http://www.free-lance.ru/freelancers/?prof=27
  • 30 Января 2011 05:39
    terror83
    Классная штука, но вопрос как теперь это прикрутить к joomla?
  • 30 Января 2011 21:52
    wwwww
    я бы посмотрел на сайт за 90тысяч рублей.
    • 31 Октября 2011 06:58
      berez
      \зайди на сайт Алсу)) увидишь) сайт правда вполне обыкновенный) до денег за него взяли добряче!)
  • 31 Января 2011 12:39
    mohatma
    Огромная благодарность - именно сейчас нужно реализовывать подобную вещь. Пока не устанавливал, но судя по комментам работает исправно
  • 1 Февраля 2011 08:03
    mohatma
    Пытаюсь поставить на свой сайт калькулятор. Но не могу сделать чтобы было без выбора категорий. Хочу сделать чтобы при открытии страницы калькулятор был уже в раскрытом виде. Кто нибудь знает решение? Заранее спасибо
    • 2 Февраля 2011 03:00
      alexxhub
      Поставьте просто нужную форму из файла fullforms.php себе вместо поля выбора. Должно сработать. Можно будет даже убрать live и переписать в простой change.
      • 2 Февраля 2011 05:55
        mohatma
        Когда заменяю поле выбора на форму из файла fullforms.php не происходит подсчёта стоимости. Пробывал редактировать scripts - безуспешно. Я заменил <div id="full_calc">...</div> на <div id="design">...</div>. Пробывал по-разному содержимое заменять - ничего не выходит. Решение где-то в файле scripts?
        • 3 Февраля 2011 02:21
          alexxhub
          вся суть в том, что форму мы грузим в div с id config_site, следовательно саму форму мы должны поместить так же в этот див. Так же удалить вот эту строку:
          formOftype.load("fullform.php",{option:typeOfSite});
          Так же стоит убрать все что выше этой строчки, так как нам уже не надо выбирать форму, кроме определения переменных. А строчку с live заменить на:
          formOftype.change(function() {
          Ну и естественно в низу кода надо подчистить от лишних закрывающих скобок.
          • 3 Февраля 2011 12:44
            mohatma
            Огромное спасибо. Правда не с первого раза, но всё же додумался. После того как сделал всё выше перечисленное в scripts в самом начале поменял type_site на config_site и наконец-то чудо свершилось. Live на change если меняю подсчёт не происходит, оставил как есть. Ещё раз большое спасибо за статью и за помощь.
          • 27 Апреля 2011 22:53
            Vladislav Yevdokimov
            Можно с вами пообщаться по тому же вопросу? Тоже не могу сделать чтобы калькулятор показывался сразу, без выбора списками.
            • 28 Апреля 2011 02:33
              alexxhub
              mohatma выше расписал что доделать надо из указанных мной функций.
              • 28 Апреля 2011 17:53
                Vladislav Yevdokimov
                Где это написано?:)
                • 29 Апреля 2011 08:13
                  alexxhub
                  В комментариях особо не распишешь, поэтому я сейчас все таки подготовлю урок дополнительный потому что вопросов таких масса.
                  • 29 Апреля 2011 17:53
                    Vladislav Yevdokimov
                    Вы отдельный урок сделаете или продолжите в этом?
                    • 3 Мая 2011 08:28
                      alexxhub
                      Отдельный урок будет, заодно посмотрим все вопросы связанные с нерабочими моментами в ИЕ7, хоть и не люблю я его, но раз народ все еще мучается под эту версию то думаю распишу и это решение. Только придется подождать, потому что как вы понимаете у всех авторов сайта есть и работа.
          • 26 Марта 2012 18:54
            chudo
            Здравствуйте. Мучаюсь с этой проблемой. Не могли бы вы точнее рассказать, как отредактировать калькулятор, чтобы он работал без выбора типа из списка?
  • 1 Февраля 2011 12:17
    arhitiron
    Всему коллективу, что занимался созданием этого урока огромное спасибо!
  • 3 Февраля 2011 19:27
    WH
    Тема хорошая, сам постоянно такие пишу, но по мне так реализация не совсем изящная что-ли, ну вот посмотрел я на этот код, и решил как обычно написать калькуль для очередного заказа сам, через аякс. Это ведь и просто и красиво)) Всегда есть возможность каждую формочку в отдельном файле посмотреть, с дизайном поработать. Есть аргументы против отдельной подгрузки форм!?
    • 7 Февраля 2011 06:28
      alexxhub
      Так тут и есть отдельная подгрузка формы. Или мы немного о разном? Форма берется из другого файла, в зависимости от параметра.
      • 7 Февраля 2011 09:33
        WH
        пытался написать пример, но скрипты ruseller'a не дали мне этого сделать, расскажу на словах. То, что нужно подгрузить решаем через jquery, таким образом мы убиваем сразу кучу зайцев: * снижаем нагрузку на сервер * соблюдаем MVC модель без всяких тормознутых PHP фреймворков. (отображение уже отдельно, за модель отвечает MySQL класс) * сайты визитки можем клепать вообще без PHP ) * каждый кусок кода в отдельном файлике - легко править.
        • 8 Февраля 2011 02:42
          alexxhub
          Ну под каждую задачу нужно все же писать свое. Это просто пример. Можно и над вашим подумать
  • 21 Февраля 2011 17:22
    andrexlg
    Замечательный урок! Если бы еще подробно описали как это в Wordpress впихнуть, было бы вообще замечательно. Еще раз спасибо
    • 21 Февраля 2011 22:25
      seregazlat
      Привет. Я знаю как сделать пиши в ICQ:454897
  • 21 Февраля 2011 22:04
    seregazlat
    Такая проблема.... В Internet Explorer 7 не считает Стоимость сайта при выделении checkbox, не могу разобраться в чем проблема. Если кто сталкивался подскажите!
    • 10 Марта 2011 00:34
      mevr
      Да также
  • 22 Февраля 2011 12:40
    andrexlg
    Спасибо seregazlat за квалифицированную помощь
  • 28 Февраля 2011 17:40
    andrexlg
    Вот тут появилась задумка сделать калькуляьтор с технологией drag&drop, нашел ресрус с кодом примерно того что я хочу нго никак не могу к вордпессу прикрутить помогите плиз http://www.bryantan.info/jquery/drag-and-drop-shopping-cart-using-jquery-jquery-ui-and-php/7 - вот ссылка
  • 10 Марта 2011 00:35
    mevr
    Народ кто решил проблему с IE?
  • 13 Марта 2011 08:13
    Memfis
    Проблема только с IE7 или вообще IE не работает? у меня демка работает, если с IE7 заходить, а когда на локалхосте открываю - чекбоксы почему-то перестают считаться...только текстовые поля обрабатываются...помогите разобраться, уважаемые разработчики! :)
  • 14 Марта 2011 17:16
    mevr
    Администрация Вы можете ответить или нет? Как решить проблему с IE - чекбоксы не работают?
  • 17 Марта 2011 11:03
    Memfis
    Я нашел метод, позволяющий чекбоксам работать правильно! Нужно заменить строку
    /* Пересчитываем все чекбоксы которые отмечены галочкой*/
    $(this + "input[name=''] :checked").each(function() {
    totalSum += parseInt($(this).val());
    });
    
    на
    /* Пересчитываем все чекбоксы которые отмечены галочкой*/
    $("input[type=checkbox]:checked") .each(function() {
    totalSum += parseInt($(this).val());
    });
    
    Однако у меня на хостинге почему-то в IE файл fullform не подгружается (в хороших браузерах все ок), а на localhost в денвере работает нормально. У кого как? И какие идеи по поводу подгрузки файла fullform?
  • 17 Марта 2011 11:36
    Memfis
    Также можно, кстати, пересчитывать и радио-кнопки, надо только изменить
    $("input[type=checkbox]:checked")
    на
    $("input[type=radio]:checked")
    а в форме написать например:
    <input type="radio" name="test" value="800"> что-то там (800 р.)
    <input type="radio" name="test" value="900"> что-то там еще (900 р.)
    <input type="radio" name="test" value="1000"> и что-то самое дорогое (1000 р.)
    
  • 17 Марта 2011 16:56
    polonoid
    если заказчику достаточно: Шаблон (10000 р.) Шаблон рисуется на основании составленного брифа и соответствует требованиям заказчика. + HTML-верстка (8000 р.) На основании утвержденного шалона создается рабочий макет. то в итоговой сумме выводится 0 р. баг
  • 30 Марта 2011 23:15
    mack90
    Урок классный но у меня вопрос в табличке программирование мне не нужен выпадающий список. Если я его убираю то калькулятор не работает, подскажите пожалуйста решение проблемы.
  • 23 Апреля 2011 19:57
    mosgraf
    Урок классный, главное нужный....! Ребята, а ни у кого нет, случаем готового "Калькулятора расчёта грузоперевозок и расстояний"? - уж сильно нужен! Если у кого найдется, - готов обсудить нюансы...!!!
  • 28 Апреля 2011 21:40
    Vladislav Yevdokimov
    Мужики, объясните пожалуйста еще раз как переписать код без выбора select. Чтобы калькулятор появлялся сразу.
  • 30 Апреля 2011 20:05
    Goliaf
    А можно ли его как-то переделать что бы без БД работал?
  • 30 Августа 2011 15:06
    Dorian76453
    Хорошая статья, спасибо автору. У меня вопрос - пытаюсь адаптировать эту штуку под свои нужды. Только не могу понять, как сделать несколько уровней! т.е. например "выпадающий_список_1" - с него я выбрал пункт 1 - появляется еще один список, (который, как я понял, выводится с файла fullform.php под значением переменной $option == х, где х равен значению value в списке). как сделать чтобы при выборе пункта со второго списка, появлялась еще одна форма? программировать я только учусь, так что простите за непонятные объяснения. надеюсь на ваши подсказки.
  • 10 Октября 2011 07:01
    funky28
    Спасибо, как раз искал!
  • 10 Ноября 2011 23:16
    userRuslan
    А не могли бы вы сделать урок, по созданию калькулятора Каско и Осаго.
  • 12 Декабря 2011 14:08
    Александр Черкесов
    Хотел поковырять ваш калькулятор, но возникает проблема с кодировкой. Причем ничего еще не менял в коде. Только скинул и открыл исходники. В чем может быть проблема?
  • 29 Января 2012 09:53
    NikC
    Исходник не рабочий, сегодня проверил!-/
  • 7 Февраля 2012 16:16
    artprog
    Помогите пожалуйста! у меня все, что написано на русском, в файле fullform.php выводится вопросами! Кодировска везде utf. Как решить проблему?
    • 17 Мая 2012 00:09
      Sadko777
      Всё достаточно просто. Открываешь fullform.php к примеру в Notepad++ . Копируешь целиком содержимое файла (комбинация клавиш сначала Ctrl-A затем Ctrl-C ) Изменяешь на вкладке кодировки - кодировку на UTF-8 (в тексте при этом весь русcкий текст превратится в (кракозябру )) :) После чего, заново выделяешь текст клавишами (Ctrl-A) и вставляеш скопированный текст из буфера обмена ,нажав клавиши (Ctrl-V) Сохраняешь, посылаешь на сервер. ВСЁ!
  • 17 Февраля 2012 16:35
    alexxhub
    У кого есть вопросы по данному материалу пишите на alexxhub@mail.ru просто реально у меня куча работы, что сюда захожу редко и публикую только те материалы, которые по моему мнению будут интересны людям. Все материалы пишу из личного опыта поэтому прошу простить за редкие косяки.
    • 9 Ноября 2015 12:06
      malefikus13
      Добрый день! Сайт Ваш не работает. Очень хотел посмотреть на готовый вариант калькулятора. Подскажите где можно это сделать? Заранее спасибо!
  • 21 Февраля 2012 17:23
    kolp821
    Здравствуйте, есть ли подобный калькулятор для Joomla? или как можно этот калькулятор перенести.
  • 9 Марта 2012 14:33
    biviz1988
    подскажите пожалуйста как сделать чтобы при выборе оператора сразу же появлялась сумма , а потом уже остальное при выборе http://xn--54-6kcu3bba1byf.xn--p1ai/calc2/index.php
  • 30 Марта 2012 12:36
    neko89
    Простите меня конечно но немножко покритикую... 1) не поддерживаются в полной мере инпуты и селекты... 2) не структурирована система выборки количества и цен что создаст проблемы при написании php кода 3) $("#type_site").change(function() вообще работает не так как надо а так как ей хочется (в частности опять обычная проблема с инпутами) На мой взгляд если упаковать в функцию и вызывать по click keyup и change было бы меньше проблем... но создаст немного больше напруги на клиент.
  • 26 Апреля 2012 12:21
    Erre
    Кое-как допилил исходники. Автору спасибо конечно, но если выкладываешь интересный урок стоит позаботиться чтобы он был оформлен как положено, и исходники были рабочими. Вот как этот калькулятор выглядит на моем сайте: www.rosenthal.kz/calc
  • 3 Августа 2012 21:27
    psics
    Также интересует вопрос от Dorian76453 Ситуация при выборе из <select id="city"> к примеру, Москва или Санкт-Петербург должно выпасть следующее <select id="probeg"> 20 000 или 25 000 а далее нужен калькулятор.... при условии, что город такой - цена такая, пробег такой - работы следующие. В итоге получаем пересчет
  • 13 Августа 2012 18:46
    krainev106
    Автор молодец. Я тоже хочу поставить себе на сайт такой калькулятор, но мне нужно чтобы эта форма ,после подсчета, отправлялась на мыло. Я сделал так(в index.php):
    <form action="send.php" method="post" name="forma">
    в конце, перед </form>, добавил кнопку
    <p><input type="submit" name="submit" value="Отправить заявку"></p>
    . А вот и сам send.php, который отправляет письмо:
    <?php
    if ($_POST['submit'])
    {
    $type_site = $_POST['type_site'];
    $email = $_POST['email'];
    $name = $_POST['name'];
    $summ = $_POST['total'];
    $ip=$_SERVER["REMOTE_ADDR"];
    $host = $ip;
    $ts = date("G:i:s, j F, Y");
    $address = 'test@gmail.com';
    $sub = "Заказ сайта";
    $mes = "ФИО: $name \nE-mail: $email \n\nТип сайта: $type_site \nСтоимость: $summ руб. \n\nIP: $host \nДата: $ts";
    $verify = mail ($address,$sub,$mes,"From:Web-студия Test <postmaster@test.nichost.ru>");
    if ($verify == 'true')
    {
    echo "<p>Сообщение отправлено</p>";
    }
    else
    {
    echo "<p>Сообщение не отправлено</p>";
    }
    }
    ?>
    Письмо отправляется как надо. Но есть проблема - калькулятор перестает считать(вернее считает только CMS, а остальное по нулям). Если вернуть <form> как было, то работает, но не работает отправка e-mail. Я вот не знаю, что делать теперь. Может организовать отправку e-mail AJAX'ом. В программировании я - новичек, ничего не понимаю в javascript. --- Извините, с этим разобрался. Спасибо Memfis'у: "
    Поменять
    /* Пересчитываем все чекбоксы которые отмечены галочкой*/
    $(this + "input[name=''] :checked").each(function() {
    totalSum += parseInt($(this).val());
    });
    на
    /* Пересчитываем все чекбоксы которые отмечены галочкой*/
    $("input[type=checkbox]:checked") .each(function() {
    totalSum += parseInt($(this).val());
    });
    
    ". Но осталась проблема - как исправить баг: Шаблон (10000 р.) + HTML-верстка (8000 р.) = 0? Помогите, пожалуйста.
    • 25 Марта 2014 12:07
      saitrunet
      krainev106 - помоги пожалуйста с отправкой данных заказа на почту.., сделал всё как ты написал ... не работает((( или напиши мне на почту seorushak@gmail.com Спасибо.
  • 27 Сентября 2012 22:49
    crazy_spaceman
    А каким образом можно поменять "select" на "radio"? Уже несколько дней ковыряюсь..
  • 29 Сентября 2012 13:48
    frodo45
    Да, спасибо за такой скрипт. Но я написал более проще. Он состоит всего лишь из 10 строк. Чистое Js и нет php. Ну я только любитель в js, но пытаюсь писать более легкие скрипты, и в тоже время более функциональные. Все равно, спасибо ;)
  • 18 Декабря 2012 22:38
    Aivas
    A можно добавить или подсказать, пункт количество сайтов, что бы все выбранное умножалось на количество сайтов. Спасибо, только учусь извините если что не так.
  • 10 Апреля 2013 17:23
    den98
    Подскажите пожалуйста, делаю калькулятор на сайт проблем 2: 1-ая: После расчета страница сразу перегружается. 2-ая: Не могу правильно составить условие, чтобы проверить переменные что там числа или некоторые равны 0 Вот код:
    jQuery(document).ready(function(){
    jQuery.noConflict();
    jQuery('#prodact').change(function() {	var myChoice = jQuery('#prodact :selected').val();	if (myChoice == 1) {	jQuery('#text').attr('value','500');	var cena = jQuery('#text').val();	}	else if (myChoice == 2) {	jQuery('#text').attr('value','350');	var cena = jQuery('#text').val();	}	else if (myChoice == 3) {	jQuery('#text').attr('value','500');	var cena = jQuery('#text').val();	}	else if (myChoice == 4) {	jQuery('#text').attr('value','560');	var cena = jQuery('#text').val();	}	else if (myChoice == 5) {	jQuery('#text').attr('value','550');	var cena = jQuery('#text').val();	}	else if (myChoice == 6) {	jQuery('#text').attr('value','800');	var cena = jQuery('#text').val();	}	else if (myChoice == 7) {	jQuery('#text').attr('value','510');	var cena = jQuery('#text').val();	}	else if (myChoice == 8) {	jQuery('#text').attr('value','1200');	var cena = jQuery('#text').val();	}	else if (myChoice == 9) {	jQuery('#text').attr('value','900');	var cena = jQuery('#text').val();	}	else if (myChoice == 10) {	jQuery('#text').attr('value','1200');	var cena = jQuery('#text').val();	}	jQuery('#raschet').click(function(){	var plochad = jQuery('#plochad').val();	var tchk = jQuery('#tchk').val() * 300;	var vstr_svet = jQuery('#vstr_svet').val() * 400;	var trub = jQuery('#trub').val() * 150;	var yglov = jQuery('#yglov').val() * 100;	var vstavka = jQuery('#vstavka').val() * 50;	var lustra = jQuery('#lustra').val() * 350;	var datchik = jQuery('#datchik').val() * 300;	var skidka = jQuery('#skidka').val();	if(!isNaN(plochad) & plochad > 0 & !isNaN(tchk) || tchk >= 0 & !isNaN(vstr_svet) || vstr_svet >= 0 & !isNaN(trub) || trub >= 0 & !isNaN(yglov) || yglov >= 0 & !isNaN(vstavka) || vstavka >= 0 & !isNaN(lustra) || lustra >= 0 & !isNaN(datchik) || datchik >= 0 & !isNaN(skidka) || skidka >= 0) {	var sum = jQuery('#text').val() * plochad + tchk + vstr_svet + trub + yglov + vstavka + lustra + datchik;	var proc = (sum * skidka) / 100;	jQuery('#sum').attr('value',sum);	var summa = sum - proc;	jQuery('#proc').attr('value',proc);	jQuery('#itog').attr('value',summa);	}	else	{	alert('Не корректно введены данные!');	}	});	});
    }); //end ready
    
    Тут можно посмотреть в реале... http://www.clearsky62.ru/culculator.php
  • 24 Августа 2013 00:06
    hesmile
    Добрый вечер! Скажите, пожалуйста, как это в joomla использовать?
  • 4 Октября 2013 12:55
    skitskis
    Очень полезный калькулятор, спасибо! Но у меня вопрос, а можно ли добавить свой класс к чекбоксам? Я это делаю тля того что бы потом вывести результат стоимости по каждому пункту в таблицу. Надеюсь на вашу помощь! Заранее спасибо!
  • 3 Декабря 2013 12:39
    GunaevVO
    Подскажите!!!! пожалуйста!!! вот калькулятор отличный, то что нужно.. но! выбрать то выбрал человек, а как сделать так чтобы его выбор пришел на почту? как туда прикрутить форму заказа? и как сделать чтобы он всё то что выбрал выводилось? Всём спасибо! Один хер не кто тут не чего не подскажет!
  • 17 Июля 2014 14:23
    oks7722
    Добрый день. Скажите пожалуйста, как добавить ещё один select. Я так понимаю, нужно создать дополнительный id="cms_radio2", но как в scripts.js это записать? Надеюсь, мой вопрос не останется без ответа.
  • 17 Июля 2014 14:27
    oks7722
    Добрый день. cms_radio
  • 18 Июля 2014 15:47
    oks7722
    Мне никто не сможет помочь?
  • 18 Апреля 2015 19:40
    mr_parlan
    а как тут грамотно заменить live на On в jquery>=1.7 вот в этой строке: formOftype.live("change",function() {
  • 1 Августа 2015 17:57
    pr77
    Как научить калькулятор считать не только целыми числами, но и с учетом копеек. Мне важно это. Пробовал ковырять файл scripts.js, а именно следующую строку:
    /* При проведении действий пересчитываем сумму в зависимости от выбраных чекбоксов */	var totalSum = 0, /* Полную сумму сначала приравниваем к нулю */
    И в место нуля дописывал такое значение: 0.00 Не работает в итоге. Помогите пожалуйста.
  • 20 Октября 2015 08:01
    olgastaf
    Отличный модуль! Только не работает. Я смотрю, тут комментарии 4-летней давности. Может, за это время кто-нибудь уже допилил модуль, или создал что-то подобное? Напишите мне на почту olgastaf@mail.ru, пожалуйста - договоримся
  • 6 Мая 2016 17:46
    webgroupco
    сделали аналогичный, доработав код и привязав его под RSForm. Пример - https://webgroupco.com/create-site/kalkulyator-stoimosti-sajta
  • 23 Августа 2016 11:26
    derol12
    подскажите пожалуйста, излазить везде и все но почему то нигде не нашел ответа, как сделать так что бы результат подсчитывал сразу без нажатие на чекбокс после загрузки страницы?
  • Комментарий удален
    • 27 Января 2011 13:48
      ???_Pyinto_??
      интересно..
      • 7 Апреля 2011 14:46
        McLotos
        А как сделать что-то подобное только без выпадающих списков? Мне просто нужно в php страницу, которая генерирует список данных с чекбоксами. Т.е. мне нужно чтобы при клике на чекбокс, его значение приплюсовывалось к переменной и записывалось в БД, я пробовал подправить калькулятор, но он упорно отказывается работать без этих списков.
        • 18 Апреля 2011 16:12
          DybovaIra
          У меня такая же задача, как у вас, убрать выпадающий список у меня получилось, но не знаю как взять значение итоговой суммы чтобы записать ее в БД, подскажите кто знает.
          • 19 Апреля 2011 07:48
            McLotos
            Запись значения итоговой суммы в БД это не проблема.Создайте запрос к Базе. Insert into MyTable (имя поля)values (имя переменной) Кстати заметил что много кому не нужен выпадающий список =)
            • 19 Апреля 2011 15:11
              DybovaIra
              Вы меня не так поняли, чтобы вставить в запрос эту переменную, вернее значение, надо сначала туда поместить результат, в данном примере результат вставляют в текст, а как поместить его в например заблокированное поле ввода. Как вставить результат скрипта в values какого нибудь элемента формы???
              • 20 Апреля 2011 07:07
                McLotos
                можете выслать код, чтобы я посмотрел? И не забудьте указать что куда нужно вставить. McLotos@gmail.com
                • 31 Августа 2011 21:56
                  Dorian76453
                  никто не подскажет?: """Хорошая статья, спасибо автору. У меня вопрос - пытаюсь адаптировать эту штуку под свои нужды. Только не могу понять, как сделать несколько уровней! т.е. например "выпадающий_список_1" - с него я выбрал пункт 1 - появляется еще один список, (который, как я понял, выводится с файла fullform.php под значением переменной $option == х, где х равен значению value в списке). как сделать чтобы при выборе пункта со второго списка, появлялась еще одна форма? программировать я только учусь, так что простите за непонятные объяснения. надеюсь на ваши подсказки.""" ? я уже все перепробовал, ничего не получается. уверен что проблема маленькая ,а я просто за отсутствия какого либо опыта в программировании ее просто не вижу!
^ Наверх ^