表单变量不通过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 inputs name attribute, making it adultInput0 instead of adultInput 0 (and also $_POST['adultInput0']), which is likely to cause problems.