Javascript未解析生成的PHP表单数组

我创建了一个简单的PHP表单，每次用户单击“添加”按钮时，通过调用javascript函数来附加一个字段

表格编号：

<form name="academicForm" method="post" action="send.php">
  <script src="addInput.js" language="Javascript" type="text/javascript"></script>
  <tr>
    <td align="center" valign="middle">
      <div id="dynamicInput"> 
        <span id="dynamicInput">Entry #1</span><br />

          <input type="text" name="myInputs[]"/>
          <select name="formGender[]">
            <option value="">Choose one...</option>
            <option value="First">first</option>
            <option value="Second">second</option>
            <option value="Third">third</option>
          </select> <br>
          <input type="submit" value="Submit">

          <input type="button" value="Add fields" onclick="addInput('dynamicInput');"/>
              </div>
    </td> 
  </tr>
</table>
</form>

然后，每当我运行它时，只打印第一个表单条目的结果。Javascript生成的表单字段中插入的所有数据都不存在，尽管它们指向相同的变量

有人能帮我吗

更新

Javascript和PHP代码都已更改，以解决重复ID和“添加”位置的问题：

Javascript:

newdiv.setAttribute('id', divName+counter);
document.getElementById(divName).appendChild(newdiv);

PHP:

---

提前谢谢

在代码中，对多个元素使用相同的Id

var counter = 1;
function addInput(divName){
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry #" + (counter + 1) + "<br><input type='text' name='myInputs[]'> <select name='formGender[]'> <option value=''>Chose one...</option><option value='First'>first</option><option value='Second'>second</option><option value='Third'>third</option></select>";

        /// newdiv.setAttribute('id', divName); //*** Element with id 'dynamicInput' already exist in the dom.
         document.getElementById(divName).appendChild(newdiv);


          counter++;
     }
}

var计数器=1；
函数addInput（divName）{
var newdiv=document.createElement（'div'）；
newdiv.innerHTML=“Entry#”+（counter+1）+“
选择一个…firstsecondthird”；
///dom中已存在id为“dynamicInput”的newdiv.setAttribute（'id'，divName）；//***元素。
document.getElementById（divName）.appendChild（newdiv）；
计数器++；
}
}

首先，您有两个ID相同的元素。ID必须是唯一的。其次，将新的输入元素添加到div容器的末尾，而不是表单中。我相信这就是你的问题所在。尝试将它们添加到提交按钮上方。

添加打印（$\u POST）；ar显示php脚本的顶部以查看返回的值。不要对多个元素使用相同的id，id应该是唯一的。加上Musa所说的，您似乎每次都添加一个id为dynamicInput的div。我已经完成了您所说的所有更正，并且我一直只接收不是由Javascript“Add”生成的表单数据。我已经更新了我帖子上的代码。提前感谢您添加Revent所说的内容-您可以试用javascript，然后在Firebug或Chrome的inspector中查看它吗？这将允许您查看它是否符合预期的表单。另外，共享$u POST输出也会有所帮助。我已经纠正了重复的id和新输入元素的位置，并且一直保持相同的情况。只有非Javascript“add”按钮生成的表单上插入的数据才会附加到$\u POST变量。我将在一分钟内编辑带有更正的主要帖子。我已经更正了，但仍然不起作用。我已经用新代码和更多信息更新了帖子

newdiv.setAttribute('id', divName+counter);
document.getElementById(divName).appendChild(newdiv);

<form name="academicForm" method="post" action="send.php">
  <script src="addInput.js" language="Javascript" type="text/javascript"></script>
  <tr>
    <td align="center" valign="middle">
      <div id="dynamicInputForm"> 

<input type="button" value="Add fields" onclick="addInput('dynamicInput');"/>

        <span id="dynamicInput">Entry #1</span><br />

          <input type="text" name="myInputs[]"/>
          <select name="formGender[]">
            <option value="">Choose one...</option>
            <option value="First">first</option>
            <option value="Second">second</option>
            <option value="Third">third</option>
          </select> <br>
          <input type="submit" value="Submit">

              </div>
    </td> 
  </tr>
</table>
</form>

<div id="dynamicInputForm"> 

                    <input type="button" value="Add" onclick="addInput('dynamicInputForm');">
                          <br>
                          <br>

        <span id="dynamicInput">Entry #1</span><br>
          <input type="text" name="myInputs[]">
          <select name="formGender[]">
                <option value="">Choose one...</option>
                <option value="First">first</option>
                <option value="Second">second</option>
                <option value="Third">third</option>
              </select>
          </select> <br>


    <div id="dynamicInputForm1"> /*HTML code above*/ </div>
    <div id="dynamicInputForm2"> /*HTML code above*/</div>
    <div id="dynamicInputForm3">/*HTML code above*/</div>
</div>

<input type="submit" value="Submit">

Array ([myInputs] => Array ( [0] => firstEntry ) [formGender] => Array ( [0] => Third )

var counter = 1;
function addInput(divName){
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry #" + (counter + 1) + "<br><input type='text' name='myInputs[]'> <select name='formGender[]'> <option value=''>Chose one...</option><option value='First'>first</option><option value='Second'>second</option><option value='Third'>third</option></select>";

        /// newdiv.setAttribute('id', divName); //*** Element with id 'dynamicInput' already exist in the dom.
         document.getElementById(divName).appendChild(newdiv);


          counter++;
     }
}