SQL見るだけクエリ#207 セレクトメニューで動的な入力フィールドを持つフォームを作成

セレクトメニューで動的な入力フィールドを持つフォームを作成する方法に関して解説をしてみようと思います。

この記事を読むと（約5分）
セレクトメニューで動的な入力フィールドを持つフォームを作成する方法をイメージできます。

セレクトメニューで動的な入力フィールド作成

以下のコードはフォームに動的な入力フィールドを追加する仕組みを作成しています。

<form id="myForm" method="post" action="submit.php">
  <div id="inputContainer">
    <!-- ここに生成されるインプットが追加される -->
  </div>
  <label for="inputCount">枠数:</label>
  <select id="inputCount" name="inputCount" onchange="updateInputFields()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <!-- 必要な数だけオプションを追加してください -->
  </select>
  <input type="submit" value="送信">
</form>
 
<script>
  function updateInputFields() {
    const container = document.getElementById('inputContainer');
    const inputCount = parseInt(document.getElementById('inputCount').value, 10);

    // 全ての既存のインプットを削除
    while (container.firstChild) {
      container.removeChild(container.firstChild);
    }

    // 選択された数だけインプットを生成
    for (let i = 0; i < inputCount; i++) {
      const inputField = document.createElement('input');
      inputField.type = 'text';
      inputField.name = 'inputField[]';
      container.appendChild(inputField);
    }
  }

  // ページが読み込まれたときに1つのインプットを表示
  updateInputFields();
</script>

1. HTML部分:
フォーム<form>には、id="myForm"とaction="submit.php"属性が指定されています。このフォームは "submit.php" というファイルにデータを送信します。

<select>要素には、id="inputCount"とonchange="updateInputFields()"属性があります。ユーザーが選択すると、updateInputFields()関数が実行されます。

<option>要素には、1から5までの値が設定されています。これらのオプションは、ユーザーが選択したい入力フィールドの数を示します。

2. JavaScript部分:
updateInputFields()関数は、選択された数だけ入力フィールドを生成します。この関数は次のように動作します。

ユーザーが選択した入力フィールドの数を取得するために、document.getElementById('inputCount').valueを使用します。これは選択されたオプションの値を取得します。
既存の入力フィールドが含まれるinputContainer要素を取得します。
container内の全ての子要素を削除して、現在表示されている入力フィールドをクリアします。
選択された数 (inputCount) だけループを実行し、新しい入力フィールドを作成します。
各ループで、document.createElement('input')を使って新しい<input>要素を作成し、type属性を 'text' に設定してテキスト入力フィールドを作成します。name属性は 'inputField[]' に設定されています。

最後に、ページが読み込まれたときにupdateInputFields()関数が呼び出されます。これにより、ページが最初に読み込まれたときに1つのテキスト入力フィールドが表示されます。

この仕組みにより、ユーザーが選択した数だけテキスト入力フィールドが生成され、それらの入力フィールドと一緒にフォームのデータが "submit.php" に送信されるようになります。"inputField[]" のようにname属性に配列記法を使用しているので、PHPのサーバーサイドスクリプトでは$_POST['inputField']として受け取ることができます。