Я решил эту проблему и буду признателен за любую помощь - она может быть чем-то очевидным, но пока я не могу понять, в чем дело.
Некоторый контекст:
Я динамически добавляю «группу» полей в форме, описывающей человека. Эти поля могут быть пустыми для всей новой записи, или пользователь может выбрать из списка существующих людей (описанных как гости), который я представляю в div. Пользователь может щелкнуть по каждому из этих гостевых элементов и добавить новую строку групповых входов с уже установленными значениями ввода.
Вот где у меня проблема. Я могу добавить новую строку групповых входов, и для входов установлено их значение, но значение не отображается внутри полей ввода.
JSFiddle Link: https://jsfiddle.net/joomquery/odgp2wre
Заранее спасибо
(function($) {
$(document).ready(function() {
let passengersRows = $('.booking-passenger-entry');
let passengersRowsI = passengersRows.length;
$('.add-guest-as-passenger').on('click', function() {
let passengerData = {};
console.clear();
console.log(this);
passengerData.guestid = $(this).attr('data-guestid');
passengerData.passengerid = 0;
passengerData.lastname = $(this).attr('data-lastname');
passengerData.firstname = $(this).attr('data-firstname');
passengerData.passportid = $(this).attr('data-passportid');
passengerData.age = $(this).attr('data-age');
passengerData.gender = $(this).attr('data-gender');
addPassenger(passengerData);
});
function addPassenger(passenger) {
passengersRowsI++;
let i = passengersRowsI;
let container = $('#passengers-container');
let genderSelectOptionA = `<option value="0">Unspecified</option>`;
let genderSelectOptionB = `<option value="1">Male</option>`;
let genderSelectOptionC = `<option value="2">Female</option>`;
if (passenger.gender == 'Male') {
genderSelectOptionB = `<option value="1" selected>Male</option>`;
} else if (passenger.gender == 'Female') {
genderSelectOptionC = `<option value="2" selected>Female</option>`;
}
console.clear();
console.log(passenger);
let passengerTemplate = `
<div class="row-fluid booking-passenger-entry inputform" id="passengers-container-${i}" data-guestid="${passenger.guestid}" data-passengerid="">
<input type="text" required id="input-name-last-${i}" name="passengers[${i}][name-last]" class="span3 b-guest-i input name-last" placeholder="Last name" val="John" >
<input type="text" required id="input-name-first-${i}" name="passengers[${i}][name-first]" class="span3 b-guest-i input name-first" placeholder="First name" val="${passenger.firstname}" >
<input type="text" required id="input-passport-${i}" name="passengers[${i}][passport]" class="span2 b-guest-i input passport" placeholder="Passport ID" val="${passenger.passportid}" >
<input type="text" required id="input-age-${i}" name="passengers[${i}][age]" class="span1 b-guest-i input age" placeholder="Age" val="${passenger.age}" >
<select id="input-gender-${i}" required name="passengers[${i}][gender]" class="span2 b-guest-i input gender">
${genderSelectOptionA}
${genderSelectOptionB}
${genderSelectOptionC}
</select>
<div class="btn-group span1 pull-right">
<div id="passenger-delete-${i}" class="btn btn-danger"><i class="fa fa-minus-circle" aria-hidden="true"></i></div>
</div>
<input type="hidden" id="input-passengerid-${i}" name="passengers[${i}][passengerid]" class="hidden b-guest-i input" val="" >
<input type="hidden" id="input-guestid-${i}" name="passengers[${i}][guestid]" class="hidden b-guest-i input" val="${passenger.guestid}" >
</div>`;
$(container).append(passengerTemplate);
}
});
})(jQuery);
.booking-passenger-entry {
padding: 0.3125rem 0;
}
.booking-guest {
margin: 1px 0;
padding: 0.3125rem !important;
line-height: 1rem;
cursor: pointer;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="booking-passengers" class="row-fluid req-passengers" style="">
<div class="controls">
<div class="passengerlist">
<h3>Dynamic guestlist:</h3>
<div class="row-fluid booking-guest booking-guest-headings">
<span class="span3 b-guest-i b-guest-h name-last">Last name</span>
<span class="span3 b-guest-i b-guest-h name-first">First name</span>
<span class="span2 b-guest-i b-guest-h passport">Passport ID</span>
<span class="span1 b-guest-i b-guest-h age">Age</span>
<span class="span2 b-guest-i b-guest-h gender">Gender</span>
</div>
<div id="passengers-container" class="passengers-container" style="border:1px solid #aaa; min-height: 30px; background: #fafafa;">
</div>
<div class="guestlist">
<h3>You may add passengers from your booking's guestlist</h3>
<div class="row-fluid booking-guest booking-guest-headings">
<span class="span3 b-guest-i b-guest-h name-last">Last name</span>
<span class="span3 b-guest-i b-guest-h name-first">First name</span>
<span class="span3 b-guest-i b-guest-h passport">Passport ID</span>
<span class="span1 b-guest-i b-guest-h age">Age</span>
<span class="span2 b-guest-i b-guest-h gender">Gender</span>
</div>
<div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-8" data-guestid="8" data-passengerid="0" data-firstname="SomeoneF1" data-lastname="SomeoneL1" data-passportid="XX2255551" data-age="43" data-gender="Male">
<span class="span3 b-guest-i name-last">SomeoneL1</span>
<span class="span3 b-guest-i name-first">SomeoneF1</span>
<span class="span3 b-guest-i passport">XX2255551</span>
<span class="span1 b-guest-i age">43</span>
<span class="span2 b-guest-i gender">Male</span>
</div>
<div class="row-fluid booking-guest add-guest-as-passenger" id="booking-guest-12" data-guestid="12" data-passengerid="0" data-firstname="SomeoneF2" data-lastname="SomeoneL2" data-passportid="XX0011221" data-age="41" data-gender="Unspecified">
<span class="span3 b-guest-i name-last">SomeoneL2</span>
<span class="span3 b-guest-i name-first">SomeoneF2</span>
<span class="span3 b-guest-i passport">XX0011221</span>
<span class="span1 b-guest-i age">41</span>
<span class="span2 b-guest-i gender">Unspecified</span>
</div>
</div>
</div>
</div>
</div>