Всем привет.
Прошу помощи. Есть несколько проблем.
Есть массив с названием направления и ценами по разным категориям.
При этом по направлениям не всегда есть цены по всем категориям.
Изначально мне нужно вывести список всех направлений по заданной категории. И это не совсем работает у меня. Если я вывожу в консоль, то там он находит все нужные элементы. А если я вывожу в html, то выдает только последний элемент...
Потом в этом же списке рядом с каждым направлением есть кнопка заказа, при нажатии на кнопку появляется форма, в которой некоторые поля уже заполнены данными из этого направления.
Эта кнопка заказа отказывается работать... Не запускается функция. Хотя если я эту кнопку буду выводить не через JS, а сразу задам в html - то она работает...
var arrPrice = [
['Роза хутор',300,500,800,1000],
['Красная Поляна',200,400,800,1200],
['Сочи',400,600,1000,1500],
['Абхазия',1200,0,3000,0],
['Пляжи',200,0,0,0],
['Деревня',500,0,990,0],
];
$('#komfort-show').click(function comfortCalc() {
console.log('Показать тарифы Комфорт');
$('#komfort-container').fadeIn();
for (var i = 0; i < arrPrice.length; i++) {
var a = arrPrice[i][1];
if (a > 0) {
$("#komfort-price").html('<div class="row white-bg"><div class="col-sm-5"><span class="napravlenie">' + arrPrice[i][0] + '</span></div><div class="col-sm-3 text-center"><span class="napravlenie-price">' + arrPrice[i][1] + 'руб.' + '</span></div><div class="col-sm-4"><button class="cp-btn-style1 showform" id="showtestform">Заказать</button><div class="container-fluid form-container" id="form-comfort-1"><div class="row"><div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1"><form class="popup-form row"><div class="form-group col-sm-12"><label for="otkuda-comfort-id-' + i + '">Откуда забрать</label><input type="text" class="form-control" name="Откуда" id="otkuda-comfort-id-' + i + '" value="Аэропорт Сочи" readonly></div><div class="form-group col-sm-12"><label for="napravlenie-comfort-id-'+ i + '">Куда отвезти</label><input type="text" class="form-control" name="Куда" id="napravlenie-comfort-id-' + i + '" value="' + arrPrice[i][0] + '" readonly></div><div class="form-group col-sm-12"><label for="class-comfort-id-' + i + '">Класс автомобиля</label><input type="text" class="form-control" name="Класс" id="class-comfort-id-' + i + '" value="Комфорт" readonly></div><div class="form-group col-sm-12"><label for="price-comfort-id-' + i + '">Стоимость поездки</label><input type="text" class="form-control" name="Стоимость" id="price-comfort-id-' + i + '" value="' + arrPrice[i][1] + '" readonly></div><div class="form-group col-sm-12"><label for="data-comfort-id-' + i + '">Дата</label><input type="text" class="form-control" name="Дата" id="data-comfort-id-' + i + '" value=""></div><div class="form-group col-sm-12"><label for="reis-comfort-id-' + i + '">Номер рейса</label><input type="text" class="form-control" name="Рейс" id="reis-comfort-id-' + i + '" value=""></div><div class="form-group col-sm-12"><label for="name-comfort-id-' + i + '">Имя*</label><input type="text" class="form-control" name="Имя" id="name-comfort-id-' + i + '" value="" required></div><div class="form-group col-sm-12"><label for="phone-comfort-id-' + i + '">Телефон*</label><input type="text" class="form-control" name="Телефон" id="phone-comfort-id-' + i + '" value="" required></div><button type="submit" class="cp-btn-style1 form-button">Отправить заявку</button><div class="close-form">❌</div></form></div></div></div></div></div>');
}
}
});
$('#showtestform').click(function showtestform() {
console.log('Открыть форму');
$('#form-comfort-1').fadeIn();
});
$('.close-form').click(function closetestform() {
console.log('Закрыть форму');
$('#form-comfort-1').fadeOut();
});
Если эту форму смотреть в html, то выглядит она примерно так
<div class="row white-bg">
<div class="col-sm-5">
<span class="napravlenie">' + arrPrice[i][0] + '</span>
</div>
<div class="col-sm-3 text-center">
<span class="napravlenie-price">' + arrPrice[i][1] + 'руб.' + '</span>
</div>
<div class="col-sm-4">
<button class="cp-btn-style1 showform" id="showtestform">Заказать</button>
<div class="container-fluid form-container" id="form-comfort-1">
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<form class="popup-form row">
<div class="form-group col-sm-12">
<label for="otkuda-comfort-id-1">Откуда забрать</label>
<input type="text" class="form-control" name="Откуда" id="otkuda-comfort-id-1" value="Аэропорт Сочи" readonly>
</div>
<div class="form-group col-sm-12">
<label for="napravlenie-comfort-id-1">Куда отвезти</label>
<input type="text" class="form-control" name="Куда" id="napravlenie-comfort-id-1" value="' + arrPrice[i][0] + '" readonly>
</div>
<div class="form-group col-sm-12">
<label for="class-comfort-id-1">Класс автомобиля</label>
<input type="text" class="form-control" name="Класс" id="class-comfort-id-1" value="Комфорт" readonly>
</div>
<div class="form-group col-sm-12">
<label for="price-comfort-id-1">Стоимость поездки</label>
<input type="text" class="form-control" name="Стоимость" id="price-comfort-id-1" value="' + arrPrice[i][1] + '" readonly>
</div>
<div class="form-group col-sm-12">
<label for="data-comfort-id-1">Дата</label>
<input type="text" class="form-control" name="Дата" id="data-comfort-id-1" value="">
</div>
<div class="form-group col-sm-12">
<label for="reis-comfort-id-1">Номер рейса</label>
<input type="text" class="form-control" name="Рейс" id="reis-comfort-id-1" value="">
</div>
<div class="form-group col-sm-12">
<label for="name-comfort-id-1">Имя*</label>
<input type="text" class="form-control" name="Имя" id="name-comfort-id-1" value="" required>
</div>
<div class="form-group col-sm-12">
<label for="phone-comfort-id-1">Телефон*</label>
<input type="text" class="form-control" name="Телефон" id="phone-comfort-id-1" value="" required>
</div>
<button type="submit" class="cp-btn-style1 form-button">Отправить заявку</button>
<div class="close-form">❌</div>
</form>
</div>
</div>
</div>
</div>
</div>
