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

Dynamically Generating Input Form Elements Based on User Input

When presented with the task of adding a specific number of input form elements, it's natural to seek straightforward and efficient solutions.

In this scenario, we have an HTML structure consisting of an input field where users enter a value representing the desired number of input fields. Upon clicking a link, the corresponding number of input fields should be dynamically generated.

Retrieving User Input

To retrieve the integer value entered by the user, we can use an onclick event handler attached to the link. By assigning a unique ID to the input field, we can access its value using document.getElementById():

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

Creating and Adding Input Elements

To efficiently add the input elements, we recommend creating a container element (e.g., a

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