Прошу помощи в оптимизации кода
Всем доброго дня! Прошу помощи в оптимизации следующего кода.
<form id="city[*id*]" method="post" action="/"> <h2 class="h3">Трансфер Город - [*pagetitle*]</h2> <!---Имя---> <div class="form-group"> <div class="col-sm-6 col-xs-12"> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-fw fa-user"></i> </span> <input type="text" class="form-control" value="" name="name" placeholder="Ваше имя"> </div> </div> </div> <!---/Имя---> <div class="form-group"> <div class="col-sm-6 col-xs-12"> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-fw fa-home"></i> </span> <input name="address" class="form-control" placeholder="Адрес"></div> </div> </div> <!---Клас авто---> <div class="form-group"> <div class="col-sm-6 col-xs-12"> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-fw fa-car"></i> </span> <select onchange="calculate()" name="cartype" id="cartype" class="form-control"> <option value="1">Комфорт</option> <option value="0.8571">Эконом</option> <option value="1.1429">Минивэн</option> <option value="1.2143">Бизнес</option> <option value="2.2143">Микроавтобус</option> </select> <script> function calculate() { var aa = [*price-city*];//базовая цена в(из) город(а) в byn select = document.getElementById("cartype"); var car = select.options[select.selectedIndex].value; var bb = [!currency-usd!];//курс usd var cc = [!currency-euro!];//курс euro var dd = [!currency-rub!];//курс рос.руб. document.getElementById('price').innerHTML = '<span class="main-currency">Стоимость ' + Math.round(aa*car) + ' Руб.</span><span class="usd">' + Math.round((aa/bb)*car)+' USD</span><span class="euro">' + Math.round((aa/cc)*car) + ' EURO</span><span class="rub">' + Math.round((aa*100/dd)*car) + ' RUB</span>'; } </script> </div> </div> </div> <!---/Класс авто---> <!---Количество человек---> <div class="form-group"> <div class="col-sm-6 col-xs-12"> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-fw fa-child"></i> </span> <input type="text" class="form-control" value="" name="count" placeholder="Количество человек (взрослые/дети)"> </div> </div> </div> <!---/Количество человек---> <!---дата и время---> <div class="form-group"> <div class="col-sm-6 col-xs-12"> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-fw fa-clock-o"></i> </span> <input type="text" value="" name="date" placeholder="Дата и время" class="datepicker-here form-control" data-timepicker="true"> </div> </div> </div> <!-------------/дата и время------------> <!---Телефон---> <div class="form-group"> <div class="col-sm-6 col-xs-12"> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-fw fa-phone"></i> </span> <input type="text" size="30" class="form-control" value="" name="phone" placeholder="Телефон"> </div> </div> </div> <!---/Телефон---> <!---E-mail---> <div class="form-group"> <div class="col-sm-6 col-xs-12"> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-fw fa-envelope"></i> </span> <input type="text" class="form-control" value="" name="email" placeholder="E-mail"> </div> </div> </div> <!---/E-mail---> <div class="form-group"> <div class="col-sm-2 col-xs-12"> <div class="input-group"> <p class="control-label">Детское кресло <select name="booster" id="booster" class="form-control"> <option vlaue="Нет">Нет</option> <option vlaue="Да">Да</option> </select> </p> </div> </div> <div class="col-sm-4 col-xs-12 no-padding"> <div class="input-group"> <p class="control-label">Безналичный расчёт (+5% от стоимости трансфера) <select name="credit_card" id="credit_card" class="form-control"> <option vlaue="Да">Да</option> <option vlaue="Нет">Нет</option> </select> </p> </div> </div> </div> <div class="form-group"> <div class="col-sm-12 col-xs-12"> <textarea name="description" class="form-control" rows="3" placeholder="Доп. информация"></textarea> </div> </div> <div class="col-sm-12 col-xs-12 text-center"><div id="price"></div></div> <div class="clear"></div> <script> var a = [*price-city*];//базовая цена в(из) город(а) в byn select = document.getElementById("cartype"); var car = select.options[select.selectedIndex].value; var b = [!currency-usd!];//курс usd var c = [!currency-euro!];//курс euro var d = [!currency-rub!];//курс рос.руб. document.getElementById('price').innerHTML = '<span class="main-currency">Стоимость ' + Math.round(a*car) + ' Руб.</span><span class="usd">' + Math.round((a/b)*car)+' USD</span><span class="euro">' + Math.round((a/c)*car) + ' EURO</span><span class="rub">' + Math.round((a*100/d)*car) + ' RUB</span>'; </script> <div class="text-center col-xs-12"> <div class="caption sfb rev-buttons tp-resizeme"> <button id="order" class="btn btn-theme-bg btn-lg" type="submit" title="Отправить" form="city[*id*]">Заказать трансфер</button></div> </div> <script> document.getElementById('city[*id*]').onsubmit = function(){ var from = "Трансфер Город - [*pagetitle*]"; var cartype_sel = document.getElementById("cartype"); var cartype = cartype_sel.options[cartype_sel.selectedIndex].text; var booster = document.getElementById('booster').value; var http = new XMLHttpRequest(); http.open("POST", "./assets/templates/site/mail.php", true); http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); http.send("&from="+ from + "&name=" + this.name.value + "&cartype=" + cartype + "&address=" + this.address.value + "&count=" + this.count.value + "&phone=" + this.phone.value + "&date=" + this.date.value + "&email=" + this.email.value + "&booster=" + this.booster.value + "&credit_card=" + this.credit_card.value + "&description=" + this.description.value); http.onreadystatechange = function() { if (http.readyState == 4 && http.status == 200) { alert('Спасибо, мы ответим Вам в ближайшее время'); location.reload(); } } http.onerror = function() { alert('Извините, данные не были переданы'); } return false; } </script> </form> Это форма заказа и калькулятор стоимости поездки на такси. При загрузке страницы происходит расчет стоимости поездки с помощью js. По ТЗ возможен выбор класса авто с изменением цены поездки (реализовано с помощью select и onchange=""). Пришлось писать тот же js, но только для выполнения onchange="". Код на 44 и 156 строках дублируется. Так же дублируется обработчик формы поскольку имеем 4 таба для каждого направления: в город, из города, в аэропорт и из аэропорта. Прошу помощи с целью упростить/объединить одинаковые js. |
Часовой пояс GMT +3, время: 00:18. |