SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Pittsburgh, PA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    showing/hiding a div based on option's classname

    Hey everybody,

    I'm still fairly new to javascript, and I can't seem to get this script I'm working on running correctly. What I want to do is show or hide a div based on the previous sibling's css class. Basically this is to show and hide fields for supplying more information in a form. Here's what I have so far. Any help at all would be greatly appreciated.

    markup:
    HTML Code:
    <ul id="ulQuestion">
    	<li>
    		<label for="cboQuestion" id="lblQuestion">This is the question</label>
    		<select id="cboQuestion" class="other">
    			<option selected="selected">Choose</option>
    			<option value="1">Yes</option>
    			<option value="2">No</option>
    			<option value="99" class="otherText">Other</option>
    		</select>
    		<div id="pnlOther" class="nodisplay">
    			<ul id="ulOther">
    				<li>
    					this is the other box
    				</li>
    			</ul>
    		</div>
    	</li>
    </ul>
    Code:
    function showOtherCbo(control, panel) {
    	var hideClass = 'nodisplay';
    	var showClass = 'display';
    	for(var i = 0; i < control.childNodes.length; i++) {
    		var opts = control.childNodes[i];
    		if(opts.className == 'otherText') {
    			while(panel.nodeType != 1) {
    				panel = panel.nextSibling;
    			}
    			panel.className = showClass;
    		}
    	}
    }
    I'm using unobtrusive javascript to attach the showOther function to the select's onchange attribute, passing "this" and "this.nextSibling".

    Thanks in advance.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So what's your question?

    How are you attaching that function to an event?

    Unobtrusive JavaScript is good but I am concerned that your code may not be following other JavaScript Best Practices I recommend you read up on them.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Pittsburgh, PA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am aware this script does go against some Javascript Best Practices, but for this particular project (most of which is out of my control) the entire site relies on javascript being available, or it won't function.

    The function is attached to the onchange event by looping through all select elements and uses setAttribute to add the event to selects with a class of "other".

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using setAttribute to attach an event handler won't work in IE.

    You didn't say but it looks like you want to check the selected property of the option with its class set to 'otherText' to know whether to show the other element of do nothing.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Pittsburgh, PA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, I guess I did leave that out. That is what I'm trying to do. I just got around to testing in IE last night and I realized that it's not working. Like I said, I'm still fairly new to javascript.


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
  •