Form variables not passing through the POST

Question

My js code dynamically creates as many input fields as the user will indicate.Thats look like this

My js code for this action:

function createAdultFileds(ele) {
  let container = document.getElementById("form-adult");
  var box1 = document.createElement('form');
  box1.className='box-1';
  box1.name='adultForm';
  box1.method='post';
  box1.action='http://test1.ru/form-handler.php';

  var box2 = document.createElement('div');
  box2.className='box-2';
  form.innerHTML = '';

   for(let i = 0; i < ele.value; i++) {
     box1.innerHTML +='<label class="alegreya-sans-regular">Adult ' + (i+1) 
     + '</label><br/>' 
     +'<p><input name="adultInput ' + i + '" id="input' + i + '" 
     class="form-size" placeholder="Firstname and Lastname" 
     onkeyup="onlineUpdateAdult(' + i + ')"></p>'
     +'<p><input type="checkbox" id="checkImgAd' + i + '" 
     onClick="changeImgAdult(' + i + ')"> +Fast Pass>></p>'
     +'<p><input type="submit" value="submit" ></p>';
    container.appendChild(box1);
  }
}

For example, I choose 1 person as in the picture above, the name of this new input is "adultInput 0",we can see it on this picture

When I click the submit button that redirects me to " http://test1.ru/form-handler.php " but my variables not passing through the POST and I have a blank page.

My "form-handler.php" code. Also this php file is in the local server:

<?php

    echo $_POST['adultInput 0'];

 ?>

What am I doing wrong?

Answer 1

I would change this

<input name="adultInput ' + i + '" id="input' + i + '" 
     class="form-size" placeholder="Firstname and Lastname" 
     onkeyup="onlineUpdateAdult(' + i + ')">

to

<input name="adultInput' + i + '" id="input' + i + '" 
     class="form-size" placeholder="Firstname and Lastname" 
     onkeyup="onlineUpdateAdult(' + i + ')">

which will omit the space in the input s name attribute, making it adultInput0 instead of adultInput 0 (and also $_POST['adultInput0'] ), which is likely to cause problems.