DropDown Select

JavaScript
1 
  <font color="#FFFFFF">Test1:</font>
<select id="tm" name="tm">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
<font color="#FFFFFF">Test:</font>
<select id="ep" name="ep">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
<option value="d">4</option>
<option value="e">5</option>
</select>

When I select number 1 (drop test1) create a input and when i select number 1 (drop test) create one textarea in simultaneously…When I select number 1 (drop test1) create a input and when i select number 2 (drop test) create two textarea in simultaneously…and so on… it’s possible?

Thanks!

2

Hi,

I’m not 100% sure that I’ve understood your question, but let me show you how to create inputs and text areas on the fly using a <select> drop down.

So, let’s start with the mark-up. We need two <select> elements with unique ids. I have also set the value of the <option> elements to correspond to the numbers they display.

<label for="tm">Number of text fields</label>
<select id="tm" name="tm">
  <option value="">Choose a number</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<label for="ep">Number of text areas</label>
<select id="ep" name="ep">
  <option value="">Choose a number</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

You then need to select these elements and attach event handlers to them, so that a function is called when the user changes their values:

var s1 = document.getElementById("tm");
var s2 = document.getElementById("ep");
s1.onchange = updateTextFields;
s2.onchange = updateTextAreas;

Within each of these functions, we can then use the value from the <option> which was selected to create the required amount of new elements (not forgetting to remove any old elements first).

function updateTextFields(){
  clearContent(textFields);
  for (i = 0; i < this.value; i++){
    input = document.createElement("input");
    input.type = "text";
    input.style.display = "block";
    textFields.appendChild(input);
  }
}

Within the for loop we can apply any attributes to our new elements that we need them to have.
Here I have added display: block;, so that they stack up under each other.

Here’s the full code. I hope it helps.
Let me know if I have misunderstood you or if you have any further questions:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Create text inputs and text areas dynamically</title>
    <style>
      div{margin-bottom:10px;}
      .fltLeft{float:left; margin-right:150px;}
      .clear{clear:both;}
    </style>
  </head>

  <body>
    <div>
      <label for="tm">Number of text fields</label>
      <select id="tm" name="tm">
        <option value="">Choose a number</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
  
    <div>
      <label for="ep">Number of text areas</label>
      <select id="ep" name="ep">
        <option value="">Choose a number</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div>
    
    <div>
      <p><strong>Result will appear below.</strong></p>
      <div class="fltLeft">Text fields</u><span id="textFields"></span></div>
      <div class="fltLeft">Text areas</u><span id="textAreas"></span></div>
      <br class="clear">
    </div>
    
    <script>
      function clearContent(el){
        while (el.hasChildNodes()) {
          el.removeChild(el.lastChild);
        }
      }
      
      function updateTextFields(){
        clearContent(textFields);
        for (i = 0; i < this.value; i++){
          input = document.createElement("input");
          input.type = "text";
          input.style.display = "block";
          textFields.appendChild(input);
        }
      }
      
      function updateTextAreas(){
        clearContent(textAreas);
        for (i = 0; i < this.value; i++){
          input = document.createElement("textarea");
          input.style.display = "block";
          textAreas.appendChild(input);
        }
      }
      
      var s1 = document.getElementById("tm");
      var s2 = document.getElementById("ep");
      var textFields = document.getElementById("textFields");
      var textAreas = document.getElementById("textAreas");
      
      s1.onchange = updateTextFields;
      s2.onchange = updateTextAreas;
    </script>
  </body>
</html>