Dynamically creating a specific number of input form elements

Generating inputs step-by-step

Validation is a key to avoid any crashes or unpredicted behaviour due to faulty user input. Ensure the input is an integer value right from the beginning.

Initialize your input field

For starters, you must bind an onclick event to a trigger button:

<button onclick="addInputs()">Add Inputs</button>


From here, addInputs Javascript function will validate user input before dynamically creating the input elements.

function addInputs() {
  let numberOfInputs = parseInt(document.getElementById('inputCount').value);
  if (isNaN(numberOfInputs) || numberOfInputs <= 0 || numberOfInputs > 10) {
    alert('Please enter a valid number between 1 and 10. We don\'t want to crash the internet, do we?');
    return;
  }

  let container = document.getElementById('inputContainer'); //Where our inputs go to party
  while (container.hasChildNodes()) { 
    container.removeChild(container.lastChild); // Clean up after the party
  }

  for (let i = 0; i < numberOfInputs; i++) {
    let input = document.createElement('input');
    input.type = 'text';
    input.name = `dynamicInput${i}`; //Everyone gets a name, no input left behind
    input.placeholder = `Input ${i + 1}`;
    container.appendChild(input); //Invite our new input to the party
    container.appendChild(document.createElement('br')); //Give our inputs some breathing room
  }
}


Add a container in your HTML setup, this will welcome your dynamic inputs:

<div id="inputContainer"></div>


Tips for dynamic form handling

Remember, reflect a consistent naming approach for dynamic inputs like dynamicInput${i}, helping to fetch their values smoothly during further operations.

Using jQuery for a greater interactive experience

To make the task more straightforward, jQuery can be your lifeline:

$(document).ready(function(){
  $('#addButton').click(function(){
    var numberOfInputsToAdd = parseInt($('#inputCount').val());
    if (numberOfInputsToAdd > 0 && numberOfInputsToAdd <= 10) {
      var $container = $('#inputContainer');
      $container.empty(); //Everyone out! Time for a fresh crew.
      for(let i = 0; i < numberOfInputsToAdd; i++) {
        $('<input>')
          .attr({
            type: 'text',
            name: `input_${i}`,
             placeholder: `Input ${i + 1}`
          })
          .appendTo($container); //New input? Come on in!
        $('<br>').appendTo($container);
      }
    }
  });
});


Never forget to include the jQuery library in your HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


Polishing your dynamic input fields

Dynamic Controls

For an unmatched UX, offer a + button next to each field, allowing users to add new ones:

function addInput(nextToElement) {
  var newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.placeholder = 'Additional input';
  nextToElement.parentNode.insertBefore(newInput, nextToElement.nextSibling);
}


Error Handling

Bulletproof error handling is an absolute. Validate inputs and maintain practicable limits. Do not add a new input if the maximum count is reached, and inform your user with a respectful message.