Я создаю форму, в которой JavaScript позволяет полям повторять количество раз, эквивалентное числу, введенному в поле ввода первой формы, например имя первого пассажира, имя первого пассажира, имя второго пассажира, фамилия второго пассажира и т. Д.нажата кнопка отправки, форма отправляется на следующую страницу.Форма содержит скрытые поля, размещенные на предыдущей странице.Эти скрытые поля публикуются с правильными значениями, что позволяет мне полагать, что в коде генерации формы есть логическая ошибка.На странице, на которой размещена форма, значения пустые, а HTML-код в инструментах разработчика показывает value = "" для поля nopass.Обратите внимание, что код не дает синтаксических ошибок и, кроме того, что он не публикуется, ведет себя так, как и ожидалось, с правильным количеством отображаемых полей и корректным обновлением стоимости текста при обновлении полей, влияющих на него.
КОД:
HTML-форма
<form name="bookpassdet" id="bookpassdet" method="post" action="bookconf.php">
<fieldset>
<legend>Booking Reference no. <?php echo $bookref; ?></legend>
<label class="amtofpass" for="amountofpassengers">Amount of Passengers</label>
<input type="hidden" name="bookref" id="bookref" value="<?php echo $bookref?>">
<input type="hidden" name="fromob" id="fromob" value="<?php echo $from?>">
<input type="hidden" name="goingob" id="goingob" value="<?php echo $goingto?>">
<input type="hidden" name="monthob" id="monthob" value="<?php echo $month?>">
<input type="hidden" name="dayob" id="dayob" value="<?php echo $day?>">
<input type="text" name ="amountofpassengers" id="nopass">
<input type="checkbox" name="wheelchair" value="yes"> Wheelchair Required<br>
<div id="container"/>
</fieldset>
</form>
JavaScript, генерирующий поля ввода
function addPassengers(e){
var pasobj=document.getElementById('nopass').value;
var container = document.getElementById("container");
while (container.hasChildNodes()){
container.removeChild(container.lastChild);
}
for(var i =0;i<pasobj;i++){
container.appendChild(document.createTextNode("Passenger " + (i+1)+" Forename"));
var input = document.createElement("input");
input.type = "text";
input.id = ("pasforname"+i);
container.appendChild(input);
container.appendChild(document.createElement("br"));
container.appendChild(document.createTextNode("Passenger " + (i+1)+" Surname"));
var input = document.createElement("input");
input.type = "text";
input.id = ("passurname"+i);
container.appendChild(input);
container.appendChild(document.createElement("br"));
container.appendChild(document.createTextNode("Passenger " + (i+1)+" Age"));
var agearr = ["<2","3-10","11-16",">16"];
var selectlist = document.createElement("select");
selectlist.id=("myselect"+i);
selectlist.name="myselect";
container.appendChild(selectlist);
container.appendChild(document.createElement("br"));
for(var k =0; k<agearr.length; k++){
var option = document.createElement("option");
option.value = agearr[k];
option.text = agearr[k];
selectlist.appendChild(option);
}
var single_button = makeRadioButton(("journey"+i),"single","Single Journey",("single"+i));
var return_button = makeRadioButton(("journey"+i),"return","Return Journey",("return"+i));
container.appendChild(single_button);
container.appendChild(return_button);
container.appendChild(document.createElement("br"));
container.appendChild(document.createTextNode("Cost: "));
var text = document.createElement("p");
text.id = ("costp"+i);
container.appendChild(text);
container.appendChild(document.createElement("br"));
}
var submit =document.createElement("input");
submit.type = "submit";
submit.id="subbutton";
submit.value="test";
container.appendChild(submit);
//add event listener to each created element in a loop where
if(window.addEventListener) {
for(var m=0;m<pasobj;m++){
document.getElementById("myselect"+m).addEventListener("change",calculateCost,false);
document.getElementById("single"+m).addEventListener("change",calculateCost,false);
document.getElementById("return"+m).addEventListener("change",calculateCost,false);
}
document.getElementById("subbutton").addEventListener("click",submitForm,false);
} else if(window.attachEvent) {
for(var m=0; m<pasobj;m++){
document.getElementById("myselect"+m).addEventListener("change",calculateCost);
document.getElementById("single"+m).addEventListener("change",calculateCost);
document.getElementById("return"+m).addEventListener("change",calculateCost);
}
document.getElementById("subbutton").addEventListener("click",submitForm);
}
}
there are 3 other functions called makeRadioButton(name,value,text, id);
calculateCost(e);
prepareBookPassDet();
prepareBookPassDet просто присоединяет eventlistener к полю формы nopass в событии keyup, вызывая функцию addPassengers
То, что я пробовал:
Я пытался поиграться с php-стороной, используя запрос вместо публикации, но безрезультатно.
Я смог прикрепить прослушиватель событий к кнопке отправки.который создает всплывающее окно с отображаемым значением, введенным в nopass, и показывает правильное значение.
Это, в сочетании со скрытыми полями, которые публикуются, наводит меня на мысль, что каким-то образом введенное значение в поле не передается, а формаявляется.
Спасибо, что нашли время, чтобы прочитать это.У меня нет опыта работы с веб-разработчиками, особенно с JavaScript, поэтому я был бы признателен за любые решения, которые объясняются в простых терминах и не включают в себя фреймворки, придерживаясь базовых php, html и javascript.Еще раз спасибо.