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

由Javascript生成的PHP表单数组无法解析

2 个答案: