displaying text box from list menu

Discussion in 'JavaScript' started by passingTime, Jul 17, 2012.

  1. #1
    I am pretty new to javascript and i am trying out something simple.

    I would like the text box to appear or disappear depending on if the 'other' menu item is selected. So something like:

    <select name='list'>
    <option value='empty'> empty </option>
    <option value='empty2'> empty2 </option>
    <option value='show_text_box'> show text box</option>
    </select>

    <script>
    if (document.list.value == 'show_text_box')
    {
    document.write("<input type='text' name='text_box'>");
    }
    <script>

    Can something like this be done? I'm struggling to figure out certain aspects of javascript.
     
    passingTime, Jul 17, 2012 IP
  2. passingTime

    passingTime Peon

    Messages:
    49
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I know i can simple change the display from hidden to block using javascript but that's not what i am trying to do.
     
    passingTime, Jul 18, 2012 IP
  3. Unni krishnan

    Unni krishnan Peon

    Messages:
    237
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    0
    #3
    You are trying to access the drop-down wrongly. You should use the following way:
    
    if (document.getElementById("list").value == 'show_text_box') {
    document.write("<input type='text' name='text_box'>");
    }
    
    Code (markup):
     
    Unni krishnan, Jul 19, 2012 IP
  4. passingTime

    passingTime Peon

    Messages:
    49
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks a lot for the reply. I've been trying to allow it to take effect to multiple selects showing a textbox for each one that selects 'other'. I am trying to not repeat code.
    I'm trying to get it to a point where i don't have to pass any parameters, or at least i only have to pass in one parameter...

    This is what i've ended up with so far, for now this is good enough... But it shouldn't be this much work to use... It should be shorter and quicker.

    
    <script type="text/javascript">
    function box(x, xo){
      var x = document.getElementById(x).value;
    
      var div = document.getElementById(xo);
    
      if (x == 'other')
        div.innerHTML = "<input type='text' name='" + xo + "'>";
      else
        div.innerHTML = '';
    }
    </script
    
    
    Select your favorite language:
    <select id="lang" onchange='box("lang", "langO");'>
      <option>PHP</option>
      <option value='other'>other</option>
    </select>
    <div id='langO'> </div>
    <br><br>
    
    
    Select your favorite color:
    <select id="color" onchange='box("color", "colorO");'>
      <option>red</option>
      <option value='other'>other</option>
    </select>
    <div id='colorO'> </div>
    
    Code (markup):
     
    passingTime, Jul 19, 2012 IP
  5. passingTime

    passingTime Peon

    Messages:
    49
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I changed the code a bit so it's better and easier to use with PHP. If anyone cares for it i'll post it. It's very simple and easy to use.
     
    passingTime, Jul 19, 2012 IP