Калькулятор стоимости услуг.
Здравствуйте.
Подскажите пожалуйста, как подружить калькулятор с chosen или любым другим кастомизатором select. Когда выбираю в select option без использования плагина chosen или ему подобных, значения изменяются в поле сумма, когда с любым плагином, то значения в поле сумма обновляются только после клика на checkbox. Прошу помощи. Заранее благодарю :thanks: <form name="calc" id="calc" action="calc.php" method="post"> <div class="left_block_calc"> <!-- Персональные даные --> <div class="calc_header_title_personal">Персональные даные</div> <input type="text" class="styler" name="name" placeholder="Имя" required="required"> <input type="tel" class="styler user-phone" name="tel" placeholder="Номер телефона" required="required"> <input type="email" class="styler" name="email" placeholder="Email"> <textarea class="styler" rows="5" cols="20" wrap="hard" name="message" maxlength="100" placeholder="Комментарий"></textarea> </div> <div class="right_block_calc"> <!-- Выбор услуги --> <div class="calc_header_title_calc">Конструктор</div> <br/> <div class="view"> </div><select name="site" placeholder="Тип сайта" class="test site"> <option value="landing">Лендинг</option> <option value="card">Cайт визитка</option> <option value="intr_shop">Интернет магазин</option> <option value="corp">Корпоративный сайт</option> <option value="portal">Портал</option> <option value="catalog">Каталог</option> <option value="self">Самописный проект</option> </select> <div style="text-align:center;"> <div style="margin-bottom:20px;"></div> <!-- Выбор услуги --> <!-- Пакет услуг --> <select name="pack" data-placeholder="Пакет услуг" class="pack calculate" required> <option></option> <option value="simple">Обычный</option> <option value="middle">Премиум</option> <option value="pro">Профессиональный</option> </select> <div style="margin-bottom:20px;"></div> </div> <!-- Пакет услуг --> <!-- Опции услуг --> <div class="calc_title">Опции</div> <div style="text-align:center; border: 1px solid #CCCCCC;border-radius:2px;padding-top: 5px;"> <div id="calc-option"> <label> <input type="hidden" class="optionally" id="opt"> </label> <label> <input name="optn[1]" type="checkbox" class="optionally" id="opt1" value="SEO"><span>SEO</span> </label> </div> <div id="calc-option"> <label> <input name="optn[2]" type="checkbox" class="optionally" id="opt2" value="Продвижение"><span>Продвижение</span> </label> </div> <div id="calc-option"> <label> <input name="optn[3]" type="checkbox" class="optionally" id="opt3" value="Монетизация"><span>Монетизация</span> </label> </div> <div id="calc-option"> <label> <input name="optn[4]" type="checkbox" class="optionally" id="opt4" value="Раскрутка"><span>Раскрутка</span> </label> </div> </div> <!-- Опции услуг --> <!-- Здесь значение меняются от выбранных вариантов --> <input type="hidden" class="result" placeholder="0 грн" readonly="readonly"> <!-- зависимость от первого select --> <input type="hidden" class="result" placeholder="0 грн" readonly="readonly"> <!-- зависимость от второго select --> <input type="hidden" class="result" placeholder="0 грн" readonly="readonly"> <input type="hidden" class="result" placeholder="0 грн" readonly="readonly"> <input type="hidden" class="result" placeholder="0 грн" readonly="readonly"> <input type="hidden" class="result" placeholder="0 грн" readonly="readonly"> <input type="hidden" class="result" placeholder="0 грн" readonly="readonly"> <!-- Здесь значение меняются от выбранных вариантов --> <!-- Общая сумма --> <input name="sum" type="text" class="styler summa" placeholder="Сумма"> </div> <button type="submit" id="blabla" class="main-form-btn">Заказать <span>→</span></button> </form> </div> </div> </div> </div> $(function () { var d = { // Лендинг landing: { product: 4000, // лендинг simple: 400, // пакет простой middle: 500, // пакет средний pro: 700, //пакет профессиональный seo: 1500, // checkbox seo promo: 1400, // checkbox раскрутка advance: 2000, // checkbox продвижение profit: 850 // checkbox монетизация }, // Сайт визитка card: { product: 3000, // сайт визитка simple: 1400, // пакет простой simple: 400, // пакет простой middle: 500, // пакет средний pro: 700, //пакет профессиональный seo: 1500, // checkbox seo promo: 1400, // checkbox раскрутка advance: 2000, // checkbox продвижение profit: 850 // checkbox монетизация }, // Интернет магазин intr_shop: { product: 12000, // интернет магазин simple: 400, // пакет простой middle: 500, // пакет средний pro: 700, //пакет профессиональный seo: 1500, // checkbox seo promo: 1400, // checkbox раскрутка advance: 2000, // checkbox продвижение profit: 850 // checkbox монетизация }, // Корпоративный сайт corp: { product: 5000, // корпоративный сайт simple: 400, // пакет простой middle: 500, // пакет средний pro: 700, //пакет профессиональный seo: 1500, // checkbox seo promo: 1400, // checkbox раскрутка advance: 2000, // checkbox продвижение profit: 850 // checkbox монетизация }, // Портал portal: { product: 5500, // портал simple: 400, // пакет простой middle: 500, // пакет средний pro: 700, //пакет профессиональный seo: 1500, // checkbox seo promo: 1400, // checkbox раскрутка advance: 2000, // checkbox продвижение profit: 850 // checkbox монетизация }, // Каталог catalog: { product: 6000, // каталог simple: 400, // пакет простой middle: 500, // пакет средний pro: 700, //пакет профессиональный seo: 1500, // checkbox seo promo: 1400, // checkbox раскрутка advance: 2000, // checkbox продвижение profit: 850 // checkbox монетизация }, // Самописный проект self: { product: 15000, // самописный проект simple: 400, // пакет простой middle: 500, // пакет средний pro: 700, //пакет профессиональный seo: 1500, // checkbox seo promo: 1400, // checkbox раскрутка advance: 2000, // checkbox продвижение profit: 850 // checkbox монетизация } }, f = document.querySelector("#calc"), g = f.querySelector(".summa"), h = f.querySelectorAll(".result"), a = f.querySelectorAll(".site, .pack, #opt1, #opt2, #opt3, #opt4"), b, k = ["seo","promo","advance","profit"]; f.addEventListener("change", function() { var c = a[0].value; b = [0, 0, 0, 0, 0, 0]; if (c) { b[0] = d[c].product; var e = a[1].value; e && (b[1] = d[c][e]); k.forEach(function(el,i) { a[i+2].checked && (b[i+2] = d[c][el] ) }); } else a[2].value = ""; g.value = b.reduce(function(b, a, c) { h[c].value = a + " грн."; return b + a }, 0) + " грн." }) }); |
Nik_Dev,
в кастомизаторе надо смотреть метод change и в него добавлять $("#calc").trigger("change"); смотреть документацию. |
Вложений: 1
Цитата:
Подскажите, пожалуйста где искать? В коде не нашел и намека. (может потому что тупой) :D Вложение 3870 |
Nik_Dev,
строка 96 f.addEventListener("change", function() { заменить на $("#calc").on("change", function() { строка 112 добавить }).trigger("change"); |
Огромное спасибо за помощь :dance: :victory:
|
Часовой пояс GMT +3, время: 22:36. |