Javascript generated input fields not posting

Question

I'm building a form where JavaScript allows fields to repeat the amount of times equivalent to the number entered into the first form input field like 1st passenger forename, 1st passenger surname, 2nd passenger forename, 2nd passenger surname etc. Once the submit button is pressed the form is sent to the next page. The form contains hidden fields posted from a previous page. These hidden fields are posted across with correct values which leads me to believe that there is a logic error in the form generation code. On the page the form is posted to, the values are blank with the HTML code in developer tools reading value="" for the nopass field. Note that the code gives no syntax errors and apart from not posting, behaves as expected, with correct amount of fields appearing and cost text correctly updating when fields that affect it are updated.

CODE:

HTML form

<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 generating input fields

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 just attaches eventlistener to nopass form field on keyup event calling addPassengers function

What ive tried:

ive tried to play around with the php side of things by using request instead of post to no avail.

ive been able to attach an event listener to the submit button which creates a popup displaying value entered into nopass and it shows correct value.

This, in combination with the hidden fields being posted leads me to believe that somehow the inputted value into the field is not being submitted but the form is.

Thank you for taking the time to read this. I'm inexperienced with web dev particularly JavaScript so would appreciate any solutions being explained in simple terms and to not include frameworks, sticking to basic php,html and javascript. Once again thank you.

Answer 1

To be sent with the form data, an input element needs to have a name attribute. The id does not take effect at this place. This is owing to the fact that there can be multiple same names, e.g. on radio buttons, but only unique IDs are valid in HTML.

In your code:

var input = document.createElement("input");
input.type = "text";
input.id = 'pasforname'+i;
input.setAttrubute('name', 'pasforname'+i);