How would I dynamically create input boxes on the fly?

Question

I want to use the value of a HTML dropdown box and create that number of input boxes underneath. I\'m hoping I can achieve this on the fly. Also if the value changes it should a

Answer 1

Here is an example that uses jQuery to achieve your goals:

Assume you have following html:

  

    
      1 input
      2 inputs
      3 inputs
    
  

  
 

And this is the js code for your task:

  $('#input_count').change(function() {
      var selectObj = $(this);
      var selectedOption = selectObj.find(":selected");
      var selectedValue = selectedOption.val();

      var targetDiv = $("#inputs");
      targetDiv.html("");
      for(var i = 0; i < selectedValue; i++) {
        targetDiv.append($(""));
      }
  });

You can simplify this code as follows:

  $('#input_count').change(function() {
      var selectedValue = $(this).val();

      var targetDiv = $("#inputs").html("");
      for(var i = 0; i < selectedValue; i++) {
        targetDiv.append($(""));
      }
  });

Here is a working fiddle example: http://jsfiddle.net/melih/VnRBm/

You can read more about jQuery: http://jquery.com/