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 add or remove appropriately.

What programming language would I need to do this in? I'm using PHP for the overall website.

melihcelik · Accepted Answer · 2011-11-26T19:05:28.293

2

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

Assume you have following html:

  <div>
    <select id="input_count">
      <option value="1">1 input</option>
      <option value="2">2 inputs</option>
      <option value="3">3 inputs</option>
    </select>
  <div>
  <div id="inputs"> </div>

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($("<input />"));
      }
  });

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($("<input />"));
      }
  });

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

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

edited Nov 26 '11 at 19:05

answered Nov 26 '11 at 18:54

melihcelik

4,531
1
21
25

1

Simply doing `$(this).val()` on the dropdown gets the selected value, not need to `.find(':selected')`. – Didier Ghys Nov 26 '11 at 19:02
@DidierG. Yes but I had an error when I did it like that, I guess there was some other issue. Now I tried and it works. I'll update the simplified answer accordingly. Thanks. – melihcelik Nov 26 '11 at 19:04
Thanks, this is very helpful! Would it be at all possible to keep the values in the box when you change the selected amount. For example, If I had 4 selected then filled out boxes 1 + 2 and then changed it to the selection to 2 and the the data stayed in the 1 and 2 boxes? – ritch Nov 26 '11 at 23:19

score 1 · Answer 2 · answered Nov 26 '11 at 18:37

1

I would go for jQuery.

To start with look at change(), empty() and append()

http://api.jquery.com/change/

http://api.jquery.com/empty/

http://api.jquery.com/append/

answered Nov 26 '11 at 18:37

score 0 · Answer 3 · edited May 23 '17 at 11:48

Doing it in javascript is quite easy. Assuming you've got a number and an html element where to insert. You can obtain the parent html element by using document.getElementById or other similar methods. The method assumes the only children of the parentElement is going to be these input boxes. Here's some sample code:

function addInput = function( number, parentElement ) {
    // clear all previous children
    parentElement.innerHtml = "";
    for (var i = 0; i < number; i++) {
        var inputEl = document.createElement('input');
        inputEl['type'] = 'text';
        // set other styles here
        parentElement.appendChild(inputEl);
    }
}

for the select change event, look here: javascript select input event

What about the select change event handling? – Nov 26 '11 at 18:32 — , Nov 26 '11 at 18:32

david · Answer 4 · 2011-11-26T19:12:41.880

you would most likely use javascript(which is what jquery is), here is an example to show you how it can be done to get you on your way

 <select name="s" onchange="addTxtInputs(this)" onkeyup="addTxtInputs(this)">
 <option value="0">Add</option>
 <option value="1">1</option>
 <option value="3">3</option>
 <option value="7">7</option>
 </select>
 <div id="inputPlaceHolder"></div>

javascript to dynamically create a selected number of inputs on the fly, based on Mutahhir answer

<script>
function addTxtInputs(o){

  var n = o.value; // holds the value from the selected option (dropdown)
  var p = document.getElementById("inputPlaceHolder"); // this is to get the placeholder element
  p.innerHTML = ""; // clears the contents of the place holder each time the select option is chosen.

// loop to create the number of inputs based apon `n`(selected value) 
   for (var i=0; i < n; i++) { 
       var odiv = document.createElement("div"); //create a div so each input can have there own line
       var inpt = document.createElement("input");
       inpt['type'] = "text"; // the input type is text
       inpt['id'] = "someInputId_" + i; // set a id for optional reference 
       inpt['name'] = "someInputName_" + i; // an unique name for each of the inputs

       odiv.appendChild(inpt); // append the each input to a div
       p.appendChild(odiv); // append the div and inputs to the placeholder (inputPlaceHolder)
     }
 }
</script>

How would I dynamically create input boxes on the fly?

4 Answers4

Linked