• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 764
  • Last Modified:

Action JS on drop down select

Morning experts,

Bit of a Javascript question for you..

I have a drop down, that needs to action a specific javascript event when someone clicks on the one the "other" field.

It needs to show a div.

My current code is below. This works absoloutely fine in Firefox 3, however in IE it fails miserably and dosen't action the code.

What can I do?


<select name="event" class="formfield">
	<option selected disabled="disabled">Select your event type</option>
	<option value="1" onClick="javascript:animatedcollapse.hide('type')">Activity Day</option>
	<option value="2" onClick="javascript:animatedcollapse.hide('type')">Conference</option>
	<option value="3" onClick="javascript:animatedcollapse.hide('type')">Corperate Hospitality</option>
	<option value="4" onClick="javascript:animatedcollapse.hide('type')">Dinner</option>
	<option value="5" onClick="javascript:animatedcollapse.hide('type')">Exhibition</option>
	<option value="6" onClick="javascript:animatedcollapse.hide('type')">Gala Dinner</option>
	<option value="7" onClick="javascript:animatedcollapse.hide('type')">Interviews</option>
	<option value="8" onClick="javascript:animatedcollapse.hide('type')">Meeting</option>
	<option value="9" onClick="javascript:animatedcollapse.hide('type')">VIP Meeting</option>
	<option value="10" onClick="javascript:animatedcollapse.hide('type')">Party</option>
	<option value="11" onClick="javascript:animatedcollapse.hide('type')">Product launch</option>
	<option value="12" onClick="javascript:animatedcollapse.hide('type')">Team Building</option>
	<option value="13" onClick="javascript:animatedcollapse.hide('type')">Training Courses</option>
	<option value="14" onClick="javascript:animatedcollapse.toggle('type')">Other</option>
	</select>
 
<div id="type" name="type" style="display:none">
Specify: <input type="text" name="name9"/>
</div>

Open in new window

0
billy_howard
Asked:
billy_howard
  • 5
  • 5
1 Solution
 
BadotzCommented:
Hard to say without seeing the code for "animatedcollapse.toggle('type')"...

I would attach the onclick event to the <select>, then test the target within the event handler to determine the <option> element that was clicked. Much less typing ;-)
0
 
billy_howardAuthor Commented:
badotz, cheers for the reply, it's all about the copy and paste though.... animatedcollapse.toggle is a function from Dynamic drive's code..

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

Is your link..

Just because I am a JS idiot, what would be the code for working out which form element has been selected and thus activating either the hide or toggle functions of animated collapse?

Cheers
0
 
BadotzCommented:
Something along these lines (untested):


function sel_on_click(e) {
    e = e || window.event;
    
    var target = e.target || e.srcElement, // Element that caused the event to fire
        value,
        text;
    
    if (target.nodeType === TEXT_NODE) { // defeat Safari bug 
        target = target.parentNode; 
    }
    // [target] contains the <option> that was clicked
    value = target.value; // [1] through [14]
    text = target.text;   // [Activity Dat] through [Other]
}

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
billy_howardAuthor Commented:
Sorry to be a pain, but I think I am being an idiot..

Have created some code, but I think with my javascript I am thinking far too PHP..


<script type="text/javascript">
function sel_on_click(e) {
    e = e || window.event;
    
    var target = e.target || e.srcElement, // Element that caused the event to fire
        value,
        text;
    
    if (target.nodeType === TEXT_NODE) { // defeat Safari bug 
        target = target.parentNode; 
    }
    // [target] contains the <option> that was clicked
    value = target.value; // [1] through [14]
    text = target.text;   // [Activity Dat] through [Other]
	
	if(value == "14"){
		document.write("Yep, toggled type");
		animatedcollapse.toggle('type');
	} else {
		document.write("Hid type.");
		animatedcollapse.hide('type');
	}
		
}
</script>
</head>
 
<body>
<select name="event" id="event" class="formfield" onChange="javascript:sel_on_click();">
        <option selected disabled="disabled">Select your event type</option>
        <option value="1" onClick="javascript:animatedcollapse.hide('type')">Activity Day</option>
        <option value="2" onClick="javascript:animatedcollapse.hide('type')">Conference</option>
        <option value="3" onClick="javascript:animatedcollapse.hide('type')">Corperate Hospitality</option>
        <option value="4" onClick="javascript:animatedcollapse.hide('type')">Dinner</option>
        <option value="5" onClick="javascript:animatedcollapse.hide('type')">Exhibition</option>
        <option value="6" onClick="javascript:animatedcollapse.hide('type')">Gala Dinner</option>
        <option value="7" onClick="javascript:animatedcollapse.hide('type')">Interviews</option>
        <option value="8" onClick="javascript:animatedcollapse.hide('type')">Meeting</option>
        <option value="9" onClick="javascript:animatedcollapse.hide('type')">VIP Meeting</option>
        <option value="10" onClick="javascript:animatedcollapse.hide('type')">Party</option>
        <option value="11" onClick="javascript:animatedcollapse.hide('type')">Product launch</option>
        <option value="12" onClick="javascript:animatedcollapse.hide('type')">Team Building</option>
        <option value="13" onClick="javascript:animatedcollapse.hide('type')">Training Courses</option>
        <option value="14" onClick="javascript:animatedcollapse.toggle('type')">Other</option>
        </select>
 
<div id="type" name="type" style="display:none">
Specify: <input type="text" name="name9"/>
</div>
 
 
</body>

Open in new window

0
 
BadotzCommented:
Change:

document.write("Yep, toggled type");
...
...
document.write("Hid type.");

to:

alert('Yep, toggled type');
...
...
alert('Hid type');
0
 
billy_howardAuthor Commented:
Hi there,

Got it working but only by commenting out some of your code.

If I comment out the below code it works like a charm..

I don't know enough about JS to be able to debug it. Any ideas?
if (target.nodeType === TEXT_NODE) { // defeat Safari bug 
    target = target.parentNode; 
}

Open in new window

0
 
BadotzCommented:
Ah, it's a missing constant value. Change:

if (target.nodeType === TEXT_NODE) { // defeat Safari bug

to:

if (target.nodeType === 3) { // defeat Safari bug

Sorry about that...
0
 
billy_howardAuthor Commented:
NO problems.

Got it working, thanks VERY much!
0
 
billy_howardAuthor Commented:
Perfect. Worked through all the problems, polite quick to reply BRILLIANT!
0
 
BadotzCommented:
No worries - glad to help.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now