2

ユーザーが「追加」ボタンをクリックするたびに、javascript関数を呼び出してフィールドを追加する単純な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="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++;
     }
}

次に、[送信]ボタンを押すと、フォームで使用されている$_POST変数が解析されるsend.phpに移動します。

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

Chrome Inspectorに表示されるように、フォームに3つの新しい要素を追加した結果は次のとおりです。

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

前もって感謝します！

4

2 に答える 2

1

たとえば、同じ ID を持つ 2 つの要素があります。ID は一意でなければなりません。次に、フォーム内ではなく、div コンテナーの末尾に新しい入力要素を追加します。これがあなたの問題があるところだと思います。送信ボタンの上に追加してみてください。

于 2012-09-18T19:53:14.543 に答える
0

コード内で、複数の要素に同じ 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++;
     }
}
于 2012-09-18T19:52:08.490 に答える