Wie kann ich Eingabeformularelemente basierend auf Benutzereingaben dynamisch generieren?

Dynamisches Generieren von Eingabeformularelementen basierend auf Benutzereingaben

Wenn man vor die Aufgabe gestellt wird, eine bestimmte Anzahl von Eingabeformularelementen hinzuzufügen, ist es selbstverständlich, nach einfachen und effizienten Lösungen zu suchen .

In diesem Szenario haben wir eine HTML-Struktur, die aus einem Eingabefeld besteht, in das Benutzer einen Wert eingeben, der die gewünschte Anzahl von Eingabefeldern darstellt. Beim Klicken auf einen Link sollte die entsprechende Anzahl von Eingabefeldern dynamisch generiert werden.

Benutzereingaben abrufen

Um den vom Benutzer eingegebenen ganzzahligen Wert abzurufen, können wir verwenden ein an den Link angehängter Onclick-Ereignishandler. Indem wir dem Eingabefeld eine eindeutige ID zuweisen, können wir mit document.getElementById() auf seinen Wert zugreifen:

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

Eingabeelemente erstellen und hinzufügen

Um effizient zu sein Um die Eingabeelemente hinzuzufügen, empfehlen wir die Erstellung eines Containerelements (z. B. ein

), an das Sie die neu erstellten Eingabefelder anhängen. Mit document.createElement() können wir die Eingabeelemente erstellen, ihre Attribute angeben und sie an den Container anhängen:

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

Mit diesem Ansatz können Sie den Container basierend auf der Benutzereingabe dynamisch füllen. Erwägen Sie die Verwendung von hasChildNodes() und removeChild(), um den Container zu leeren, bevor Sie neue Elemente hinzufügen, um sicherzustellen, dass nur die relevanten Felder angezeigt werden.

Das obige ist der detaillierte Inhalt vonWie kann ich Eingabeformularelemente basierend auf Benutzereingaben dynamisch generieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html Integer using Event append number this input Access

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn