如何根據使用者輸入動態產生輸入表單元素？-js教程-PHP中文網

如何根據使用者輸入動態產生輸入表單元素？

Barbara Streisand

發布： 2024-10-27 10:16:30

原創

309 人瀏覽過

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>

登入後複製

建立和新增輸入元素

高效添加輸入元素，我們建議建立一個容器元素（例如，

），您將在其中附加新建立的輸入欄位。使用 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中文網其他相關文章！