Я работаю над системой бронирования, в которой у меня есть форма бронирования на главной странице, и после того, как пользователь заполняет ее, он перенаправляется на страницу бронирования.
Ниже приведен скриншот формы бронирования на главной странице:
Кнопка «Забронировать» ведет на страницу бронирования. Из этой формы, когда пользователь выбирает количество детей, к форме добавляются дополнительные раскрывающиеся списки, которые требуют от пользователя выбора возраста ребенка/детей на основе выбранного числа. например если пользователь заполнит 2 дочерних элемента, будут добавлены 2 дополнительных раскрывающихся списка:
На странице бронирования пользователю предоставляется форма бронирования с информацией, которую он заполнил на главной странице. Ниже приведен скриншот страницы бронирования:
На мой вопрос: обратите внимание, как на приведенном выше снимке экрана формы бронирования на странице бронирования возраст детей установлен на 17 лет. Это связано с тем, что на главной странице после выбора 2 детей для возраста я выбираю 9 и 17 лет. для двух раскрывающихся списков. в форме бронирования на странице бронирования (после нажатия кнопки «Забронировать») в двух раскрывающихся списках для возрастов детей будет установлено значение последнего выбранного параметра раскрывающегося списка. Итак, скажем, например, на главной странице я выбираю 4 детей, к форме будут добавлены дополнительные 4 раскрывающихся списка, и если для возраста я выберу 5,9,6,10, то при перенаправлении на страницу бронирования все дети возраст для 4 детей будет установлен на 10.
Для формы на главной странице у меня есть div, к которому я добавляю раскрывающиеся списки возраста. то есть для формы на главной странице:
<div class = "display-text"></div><div id = "children-number" class="children-number"></div>
в моем файле javascript я добавляю div следующим образом:
$('select[name="gdlr-children-number[]"]').on('change', function(e){
var children_num = e.target.value;
displayChildren(children_num);
});
function displayChildren(children_num)
{
var min_num = 0;
var max_num = 18;
var options = '';
options += '<select name = "age" class = "children-num">';
options += '<option value = ""></option>';
if(children_num == 0)
{
var display = $('.display-text').css('display', 'none');
}
else if(children_num == 1)
{
var display = $('.display-text').html('<p>Age of child at check-out</p>').css('display', 'block');
}
else if(children_num > 1)
{
var display = $('.display-text').html('<p>Ages of children at check-out</p>').css('display', 'block');
}
for( var i = min_num; i < max_num; i++ )
{
options += '<option value = '+i+' >'+i+'</option>';
}
options += '</select> ';
for(var i = 0; i<=children_num; i++)
{
$('select[name="gdlr-children-number[]"]').bind('change', function(){display;});
document.getElementById("children-number").innerHTML = options.repeat(children_num);
}
}
Итак, в основном у меня есть слушатель «изменить» в раскрывающемся списке детей, который выполнит функцию displayChildren. функция displayChildren добавляет параметры выбора в зависимости от количества детей, выбранных в раскрывающемся списке «Дети». Это для главной страницы
Для страницы бронирования выполняется проверка, чтобы увидеть, сколько детей выбрано для загрузки, и это используется для выполнения функции displayChildren, т.е.
$(document).ready(function(){
var children_num = $('select[name="gdlr-children-number[]"]
option:selected').text();
displayChildren(children_num);
});
Чтобы добавить возраст детей, выбранных на главной странице, для отражения в этой форме бронирования, я подумал о сохранении выбора возраста в сеансе как:
$('#children-number').on('change', '.children-num', function(e){
var child_num = e.target.value;
sessionStorage.setItem("random", child_num);
});
Я помещаю эту функцию вне функции готовности, а затем внутри функции готовности извлекаю сохраненный элемент;
$(document).ready(function(){
var children_num = $('select[name="gdlr-children-number[]"] option:selected').text();
displayChildren(children_num);
child_num = sessionStorage.getItem("random");
$('.children-num').val(child_num);
});
Это, очевидно, вернет одно значение, поэтому я даже пытался захватить выбранные возрасты и поместить их в массив при настройке сеанса и зацикливании в sessionStorage.getItem, но тем не менее я получаю значение последнего выбранного элемента возраста.
Я постарался быть как можно более подробным, чтобы мой вопрос был понятен. Спасибо
- ИЗМЕНИТЬ
Основываясь на комментарии @xcy7e, я сократлю вопрос:
У меня есть форма бронирования на главной странице, которая публикует данные, заполненные на странице бронирования. В форме бронирования есть раскрывающийся список «Дети» (содержащий значения от 0 до 17), который при выборе добавляет дополнительные раскрывающиеся списки в зависимости от количества выбранных детей. В прилагаемом раскрывающемся списке будет указан возраст ребенка/детей.
Проблема, с которой я столкнулся, заключается в следующем: после того, как выпадающие списки добавлены к форме и выбраны, я изо всех сил пытаюсь зафиксировать эти данные и передать их на страницу бронирования (согласно моему второму снимку экрана). Точная проблема заключается в том, что после того, как я выберу возраст, значение, выбранное для последнего раскрывающегося списка (скажем, выбрано 2 ребенка, будут добавлены дополнительные 2 раскрывающихся списка для захвата их возраста. Если я выберу 2 и 3 для них, после того, как я отправьте форму, я получу значение обоих раскрывающихся списков, равное 3) — это то, на что будут установлены все возрасты. Я выложил код выше. Надеюсь, это прояснит мой вопрос.
