Wie kann ich Eingabeformularelemente basierend auf Benutzereingaben dynamisch generieren?-js-Tutorial-php.cn

Wie kann ich Eingabeformularelemente basierend auf Benutzereingaben dynamisch generieren?

Barbara Streisand

Freigeben： 2024-10-27 10:16:30

Original

220 Leute haben es durchsucht

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

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!