SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unobtrusive/separated way of hiding a field when an option is chosen in a select menu

    I'm using the following script to hide a table row that contains a question and another select menu if a certain option is chosen in a select menu. Can someone tell me how to do this without using any javascript (onchange) in the HTML?

    Code:
    <select name="contact" id="contact" onchange="showOption(this.options[this.selectedIndex])">
    
    function showOption(selected) {
    	var val = selected.value.toLowerCase();
    	var el = getObjRef('phoneRow');
    
    	if(val != 'phonecall') {
    		try {
    			el.style.display = 'table-row';
    		} catch (err) {
    			el.style.display = 'block';
    		}
    	} else {
    		el.style.display='none';
    	}
    }
    Are there any other improvements that could be made to my script?

    Does anyone know of any good tutorials on keeping all of the javascript out of the HTML and working with forms?
    John Saunders

  2. #2
    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)
    Code:
    window.onload = function() {
      var sel = document.getElementById('contact');
      var el = document.getElementById('phonerow');
      sel.onchange = function() {
        var val = sel.value.toLowerCase();
        if (val != 'phonecall') {
          try {
            el.style.display = 'table-row';
          } catch (err) {
            el.style.display = 'block';
          }
        }
        else {
          el.style.display = 'none';
        }
      }
    }
    When the onload event fires (when the page has finished loading) the script finds the select dropdown and attaches an anonymous function to it, which is identical to your showOption function (except that I used document.getElementById).

    Put it in an external .js file and put <script type="text/javascript" src="whatever.js"></script> in the head. Just search for "unobtrusive javascript" in google and you'll get a myriad of tutorials, articles and showing off relating to it. As for working with forms, I don't see that it's particularly different to working with anything else.

  3. #3
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you tell me why you used anonymous functions? I haven't noticed them being used before and was wondering if this is a common practice? Is it also normal to directly assign a function to the window.onload event?

    Thanks a lot for the help.
    John Saunders

  4. #4
    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)
    The anonymous function is merely a wrapper to contain things that are to happen onload. I could just have easily done something like this:
    Code:
    window.onload = start();
    function start() {
      // things to do onload
    }
    But since I would only call start() once, I might as well make it anonymous. The same goes for sel.onchange.

    I think it's pretty normal to assign a function to window.onload... I learnt most of this stuff when I first delved into javascript by reading quirksmode.org's articles on events.


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
  •