• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 776
  • 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
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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