Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.10.2017, 16:13
Новичок на форуме
Отправить личное сообщение для eagle_nest Посмотреть профиль Найти все сообщения от eagle_nest
 
Регистрация: 07.10.2017
Сообщений: 1

Прошу помощи в оптимизации кода
Всем доброго дня! Прошу помощи в оптимизации следующего кода.
<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.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прошу помощи! Slandewi jQuery 3 13.07.2016 23:32
Прошу помощи с формой обратной связи markfostel jQuery 14 14.10.2015 00:29
Прошу помощи с "разборкой" кода yurik3 Ваши сайты и скрипты 3 11.09.2013 22:08
Прошу помощи xavi AJAX и COMET 8 28.01.2013 10:36
Прошу помощи, грамотное размножение куска кода M2_ jQuery 4 14.03.2010 14:21