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

Question

我创建了一个简单的 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代码：

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);
         document.getElementById(divName).appendChild(newdiv);


          counter++;
     }
}

然后，当按下提交按钮时，将被定向到 send.php，其中将解析表单中使用的 $_POST 变量：

$myInputs = $_POST["myInputs"];
$formGender = $_POST["formGender"];

foreach ($myInputs as $eachInput) {
    $output .=  $eachInput . "\n";
}

foreach ($formGender as $eachInput2) {
    $output .=  $eachInput2 . "\n";
}

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

谁能帮我解决这个问题？

更新

为了解决重复 ID 和“添加”位置，Javascript 和 PHP 代码都已更改：

Javascript：

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

PHP：

<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>

这是在表单中添加 3 个新元素的结果，如 Chrome Inspector 中所示：

<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">

print_r($_POST);的结果

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

提前致谢！

Answer 1

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

Answer 2

在您的代码中，您对多个元素使用相同的 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++;
     }
}