表单变量未通过POST

Question

我的js代码会动态创建用户指示的尽可能多的输入字段。看起来像

此操作的我的js代码：

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);
  }
}

例如，如上图所示，我选择了1个人，此新输入的名称为“ adultInput 0”，我们可以在此图片上看到它

当我单击“提交”按钮将我重定向到“ http://test1.ru/form-handler.php”时，但我的变量未通过POST，并且页面空白。

我的“ form-handler.php”代码。这个php文件也位于本地服务器中：

<?php

    echo $_POST['adultInput 0'];

 ?>

我在做什么错了？

Answer 1

我会改变这一点

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

到

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

会省略input的{​​{1}}属性中的空格，使其成为name而不是adultInput0（还有adultInput 0），这很可能引起问题。