ユーザー入力に基づいて動的な入力フォーム要素を作成するにはどうすればよいですか?

ユーザー入力に基づいて入力フォーム要素を動的に生成する

問題ステートメント

ユーザーが指定した特定の番号に基づいて動的入力フォーム要素を作成する気の遠くなるような仕事になるだろう。いくつかのオンライン リソースでは複雑なソリューションが提供されており、よりシンプルなアプローチを求めるユーザーにとっては圧倒される可能性があります。

ソリューション

この単純化されたアプローチでは、入力フィールドを動的に作成します。ユーザー。

1.ユーザー入力の取得

JavaScript を使用すると、ユーザーが「メンバー数」入力フィールドに入力した整数値を取得できます。

<code class="javascript">var number = document.getElementById("member").value;</code>

2.コンテナ要素の作成

動的に生成された入力フィールドを保持するにはコンテナ要素が必要です。この目的のために、「container」という ID を持つ div コンテナを作成します。

<code class="html"><div id="container"></div></code>

3.入力フィールドを動的に生成

ユーザーが入力した数値をループし、入力フィールドを作成してコンテナ要素に追加します。フォームを適切に送信できるように、これらのフィールドに必ず一意の名前を割り当ててください。

<code class="javascript">for (i=0;i<number;i++){
  var input = document.createElement("input");
  input.type = "text";
  input.name = "member" + i;
  container.appendChild(input);
  container.appendChild(document.createElement("br"));
}

4. Submit のイベント ハンドラー

上記の関数をトリガーするイベント ハンドラーを [詳細を入力] リンクに割り当てます。これにより、必要な数の入力フィールドが生成されます。

<code class="html"><a href="#" id="filldetails" onclick="addFields()">Fill Details</a></code>

5.再入力する前にコンテナをクリア

複数のフォーム送信が行われたときに入力の重複を防ぐには、新しい入力フィールドを再入力する前にコンテナ要素をクリアすることをお勧めします。

<code class="javascript"> while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
}</code>

これらの手順に従うことで、指定した数の入力フォーム要素を動的に作成でき、ソリューションが効率的かつユーザーフレンドリーになります。

以上がユーザー入力に基づいて動的な入力フォーム要素を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。