SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Targeting a particular option in a select dropdown

    Hi,

    I have a select dropdown menu and I want a text input box to appear when the user selects one particular option. I put this in the <head> but I have no idea why it doesn't work:
    Code:
    var x = document.getElementById('y');
    x.onfocus = function () {document.getElementById('z').style.display='inline'}
    Code:
    HTML:
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option id="y">4</option>
    </select>
    <input type="text" id="z" />
    #z would have display:none; set to it to begin with. Your help is much appreciated!

  2. #2
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    Javascript:
    function frmChange()
    {
       var sel = document.getElementById('y');
    
       if(sel.value == 4)
       {
          document.getElementById('z').style.display='inline';
       }
       else
       {
          document.getElementById('z').style.display='none';
       }
    }
    
    HTML:
    <select id="y" onchange="frmChange()">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
    <input type="text" id="z" />
    Untested, but I think it will work.

    Regards,
    Jordan

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That didn't work I'm afraid. I also want to avoid using inline events and have everything in the head. I tried this, but it doesn't work (#y is the <select> now):
    Code:
    var x = document.getElementById('y');
        x.onchange = function() {
    	    if(x.value == 4) {
      	    document.getElementById('z').style.display='inline';
      	    }
        }
    If someone could explain why my first attempt and this second one (and Jordan's) don't work, that would be great. I don't just want it to work, I want to understand it too.

  4. #4
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I just realised we were creating the select element the wrong way.
    HTML Code:
    HTML:
    <select id="y" onchange="frmChange()">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
    Code:
    var x = document.getElementById('y');
        x.onchange = function() {
    	    if(x.value == '4') {
      	    document.getElementById('z').style.display='inline';
      	    }
        }
    How's that Raffles?

    Regards,
    Jordan

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm afraid it still doesn't work. I've uploaded the script here. The relevant bits are these:
    Code:
    <script type="text/javascript">
        var x = document.getElementById('thumbs');
        x.onchange = function() {
    	    if(x.value == 'custom') {
      	    document.getElementById('customthumbsinput').style.display='inline';
      	  }
    	  }
      </script>
    HTML Code:
    <form method="get" action="g.php">
          <div>
            <label for="perpage">thumbs per page:</label>
            <select name="perpage" id="thumbs">
              <option value="10">10</option>
              <option value="20">20</option>
              <option value="30">30</option>
              <option value="40" selected="selected">40</option>
              <option value="50">50</option>
              <option value="80">80</option>
              <option value="100">100</option>
              <option value="150">150</option>
              <option value="custom">Custom...</option>
            </select>
            <input type="text" id="customthumbsinput" name="perpage" />
            <input type="submit" value="&gt;" id="submitperpage" />
          </div>
        </form>
    And #customthumbsinput starts off with display:none;
    Anyone, please?

  6. #6
    SitePoint Zealot yacka's Avatar
    Join Date
    Aug 2006
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think 'x' is not being set as that code is executed before the dom has finished loading. You can check this by putting alert(x) inside the anonymous function, which will show undefined. I did some tweaking of your code to make sure x was set after the dom was loaded. This is a bit of a hack that may not work on all browsers, so I suggest checking out http://www.quirksmode.org/js/introevents.html for some excellent insight into event handling in javascript.

    Code:
    <html>
    <script type="text/javascript">
    
    var x;
    
    function thumbchanged()
    {
    	if(x.value == 'custom')
    	{
    		document.getElementById('customthumbsinput').style.display='inline';
    	}
    	else
    	{
    		document.getElementById('customthumbsinput').style.display='none';
    	}
    }
    
    function initx()
    {
    	x = document.getElementById('thumbs');
    
    	x.onchange = thumbchanged;
    }
    
    window.onload = initx;
    
      </script>
    <body>
    
    <form method="get" action="g.php">
          <div>
            <label for="perpage">thumbs per page:</label>
            <select name="perpage" id="thumbs">
              <option value="10">10</option>
              <option value="20">20</option>
              <option value="30">30</option>
              <option value="40" selected="selected">40</option>
              <option value="50">50</option>
              <option value="80">80</option>
              <option value="100">100</option>
              <option value="150">150</option>
              <option value="custom">Custom...</option>
            </select>
            <input type="text" id="customthumbsinput" style="display: none;" name="perpage" />
            <input type="submit" value="&gt;" id="submitperpage" />
          </div>
        </form>
    
    </body>
    </html>

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I realised when I went home last night that I forgot about that. The easy solution was of course to put it in the <body>, but I don't like that either - I think it's messy. I prefer all javascript to be in the <head>.

    Thanks a lot yacka, and that quirksmode article is what made me start disliking the Netscape model. Thanks for reminding me of it.


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
  •