Javascript will not work in IE8

Question

The following Javascript will not work in IE8 but works well in FF, Safari, IE9, and Chrome. I admit to being a noobie with Javascript and I have spent 2 days looking for a solution with no luck. IE8 does not like the toggle function or the hide.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
.hide {
    display: none;
}
</style>



<script type="text/javascript">
function toggleField(evt) {
            evt = (evt) ? evt : event;
            var target = (evt.target) ? evt.target : evt.srcElement;
            var block = document.getElementById("specialty");
            if (target.id == "fieldFlag1") {
                block.style.display = "block";
            } else {
                block.style.display = "none";
            }
        }
</script>

</head>

<body>

<div id="profession">       

             Field of professional work (as applicable):
            <select size="1" name="profession">
                <option>-- Choose One --</option>
                <option value="Architecture">Architecture</option>
                <option value="FineArts">Arts, Fine</option>
                <option value="PerformingArts">Arts, Performing</option>
                <option value="Business">Business</option>
                <option value="Consulting">Consulting</option>
                <option value="Counseling">Counseling</option>
                <option value="Dentistry">Dentistry</option>
                <option value="Education">Education</option>
                <option value="Engineering">Engineering</option>
                <option value="Environment">Environment</option>
                <option value="Finance">Finance</option>
                <option value="Government">Government</option>
                <option value="Healthcare—NonMedical">Healthcare&#8212;Non&#160;Medical</option>
                <option value="HigherEducation">Higher&#160;Education</option>
                <option value="InformationTechnology">Information&#160;Technology</option>
                <option value="Law">Law</option>
                <option value="Marketing">Marketing</option>
                <option value="Media/Communications">Media/Communications</option>
                <option value="Medicine">Medicine</option>
                <option value="Military">Military</option>
                <option value="Music">Music</option>
                <option value="NonProfit">Non&#160;Profit</option>
                <option value="Nursing" id="fieldFlag1" onclick="toggleField(event)">Nursing</option>
                <option value="PublicService">Public&#160;Service</option>
                <option value="Science/Research">Science/Research</option>
                <option value="SocialServices">Social&#160;Services</option>
                <option value="Sports">Sports</option>
                <option value="Trade/Craft">Trade/Craft</option>
              </select>
    </div>


  <div id="specialty" class="hide">
       Choose Specialty:
        <select name="Specialty" size="1">
<option value="nursing">Nursing</option>
<option value="nurse Practitioner Unspecified">Nurse‌·Practitioner‌·Unspecified</option>
<option value="nurse inactive">Nurse‌·Inactive</option>
<option value="womens health">Womens‌·Health</option>
<option value="administration">Administration</option>
<option value="hospital">Hospital</option>
<option value="critical care">Critical‌·Care</option>
<option value="home health">Home‌·Health</option>
<option value="surgical">Surgical</option>
<option value="clinical Research">Clinical‌·Research</option>
<option value="family health">Family‌·Health</option>
<option value="acute care nursing">Acute‌·Care‌·Nursing</option>
<option value="community Health Nursing">Community‌·Health‌·Nursing</option>
<option value="emergency nursing">Emergency‌·Nursing</option>
<option value="nurse practitioner: adult health">Nurse‌·Practitioner:‌·Adult‌·Health</option>
<option value="nurse practitioner: pediatrics">Nurse‌·Practitioner:‌·Pediatrics</option>
<option value="nurse practitioner: neonatal">Nurse‌·Practitioner:‌·Neonatal</option>
<option value="nurse practitioner: acute care">Nurse‌·Practitioner:‌·Acute‌·Care</option>
<option value="nurse practitioner: family">Nurse‌·Practitioner:‌·Family</option>
<option value="nurse practitioner: gerontology">Nurse‌·Practitioner:‌·Gerontology</option>
<option value="nurse practitioner: women's health">Nurse‌·Practitioner:‌·Women's‌·Health</option>

</select>
</div>
</body>
</html>

What do you mean by "will not work"? I'm guessing you mean `block` isn't shown or hidden, but I could be wrong. Please provide more detail to your question. — Bojangles, Jan 15 '13 at 18:14
I don't believe the click event is valid on options. It is valid, however, on select elements. — srijan, Jan 15 '13 at 18:14

score 0 · Answer 1 · edited Sep 06 '14 at 22:11

0

In order to make your code work in IE8, you need to change:

var target = (evt.target) ? evt.target : evt.srcElement;

with:

var target = (evt.currentTarget) ? evt.currentTarget : event.srcElement;

The reason is that Internet Explorer's versions prior to 9.0 do not handle events in a standard way.

Whenever an event is triggered, a global variable named event is made available everywhere. It is known as the event object.

You can check this URL for more details:

http://msdn.microsoft.com/en-us/library/ie/ms535863%28v=vs.85%29.aspx

edited Sep 06 '14 at 22:11

answered Jan 15 '13 at 18:17

canolucas

1,482
1
15
32

check out the comment, i will add more details soon =) – canolucas Jan 15 '13 at 18:19

score 0 · Answer 2 · edited May 23 '17 at 10:24

function toggleField(target) {            
            var block = document.getElementById("specialty");
            if (target.options[target.selectedIndex].value == "Nursing") {
                block.style.display = "block";
            } else {
                block.style.display = "none";
            }
        }

and in HTML (instead of onchange event of select is used instead of option's onclick):

<select size="1" name="profession" onchange="toggleField(this)">

where this points to an element which was changed. Just to not write all those

evt = (evt) ? evt : event;
var target = (evt.target) ? evt.target : evt.srcElement;

onclick on options - I do not think it should be available at all.

UPD: Here is an answer where you can find a list of browsers that does not support onclick event for <option>

score 0 · Answer 3 · answered Jan 15 '13 at 18:23

on your first select change

var e = document.getElementById("your First Select");
var valueOption= e.options[e.selectedIndex].value;
var block = document.getElementById("specialty");

if (valueOption == "Nursing")
      block.style.display = "block";
} else {
      block.style.display = "none";
}

Javascript will not work in IE8

3 Answers3