SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: DropDown Select

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DropDown Select

    Code:
      <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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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.

    HTML Code:
    <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:

    Code JavaScript:
    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).

    Code JavaScript:
    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:

    HTML Code:
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •