如何动态创建输入框？

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.

Answer 1

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/

Answer 2

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/

Answer 3

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

Answer 4

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>