ユーザー入力に基づいて入力フォーム要素を動的に生成するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-10-27 10:16:30

オリジナル

220 人が閲覧しました

How Can I Dynamically Generate Input Form Elements Based on User Input?

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

特定の数の入力フォーム要素を追加するタスクが与えられた場合、簡単で効率的な解決策を求めるのは自然なことです。 .

このシナリオでは、ユーザーが必要な入力フィールドの数を表す値を入力する入力フィールドで構成される HTML 構造があります。リンクをクリックすると、対応する数の入力フィールドが動的に生成されます。

ユーザー入力の取得

ユーザーが入力した整数値を取得するには、次を使用します。リンクにアタッチされた onclick イベントハンドラー。入力フィールドに一意の ID を割り当てることで、document.getElementById():

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

ログイン後にコピー

入力要素の作成と追加

を使用してその値にアクセスできます。 input 要素を追加する場合は、新しく作成した入力フィールドを追加するコンテナ要素 (例:

) を作成することをお勧めします。 document.createElement() を使用すると、入力要素を作成し、その属性を指定してコンテナーに追加できます。

<code class="javascript">var container = document.getElementById("container");

for (i = 0; i < number; i++) {
  // Append a text node
  container.appendChild(document.createTextNode("Member " + (i + 1)));

  // Create an input element
  var input = document.createElement("input");
  input.type = "text";
  input.name = "member" + i;
  container.appendChild(input);

  // Append a line break
  container.appendChild(document.createElement("br"));
}</code>

ログイン後にコピー

このアプローチにより、ユーザーの入力に基づいてコンテナーに動的に値を設定できます。関連するフィールドのみが表示されるように、新しい要素を追加する前に hasChildNodes() と RemoveChild() を使用してコンテナをクリアすることを検討してください。

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