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 生成的表单字段中的所有数据，尽管事实上指向相同的变量，但并不存在。

谁能帮我解决这个问题？

更新

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

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 容器的末尾，而不是在您的表单中。我相信这就是您的问题所在。尝试将它们添加到您的提交按钮上方。