如何根据用户输入动态生成输入表单元素？

根据用户输入动态生成输入表单元素

当面临添加特定数量的输入表单元素的任务时，很自然地会寻求简单高效的解决方案.

在这种情况下，我们有一个由输入字段组成的 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中文网其他相关文章！