Solved

Action JS on drop down select

Posted on 2009-05-12
10
709 Views
Last Modified: 2012-05-06
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
Comment
Question by:billy_howard
  • 5
  • 5
10 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 24363132
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
 
LVL 1

Author Comment

by:billy_howard
ID: 24363662
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
 
LVL 29

Accepted Solution

by:
Badotz earned 500 total points
ID: 24363942
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
 
LVL 1

Author Comment

by:billy_howard
ID: 24366249
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
 
LVL 29

Expert Comment

by:Badotz
ID: 24366845
Change:

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

to:

alert('Yep, toggled type');
...
...
alert('Hid type');
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 1

Author Comment

by:billy_howard
ID: 24383500
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
 
LVL 29

Expert Comment

by:Badotz
ID: 24386348
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
 
LVL 1

Author Comment

by:billy_howard
ID: 24394072
NO problems.

Got it working, thanks VERY much!
0
 
LVL 1

Author Closing Comment

by:billy_howard
ID: 31580466
Perfect. Worked through all the problems, polite quick to reply BRILLIANT!
0
 
LVL 29

Expert Comment

by:Badotz
ID: 24395614
No worries - glad to help.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now