Javascript not running on IE

Question

I Got a javascript that runs very well on firefox and safari, but refuses to run on IE

It's the following:

var drop= function(id)
{
   if(document.getElementById("select1").value == "Ficha de pediatria"){
    top.location.href = "print.jsp?id="+id+"&type=2";
   }
   else if(document.getElementById("select1").value == "Ficha normal"){
     top.location.href = "print.jsp?id="+id+"&type=1";
   }
}

<select id="select1" name="select1" onChange="drop(id);return false;">
<option>Imprimir:</option>
<option>Ficha de pediatria</option>
<option>Ficha normal</option>
</select>

I trimed this as it had more JSP code but it' remained the same. Anyone got any idea why it's not running on IE?

Answer 1

[EDIT] Sorry. I introduced an error with my first post by not carefully looking at how you are constructing your url. I shouldn't have removed the id parameter. I've updated the code and it should work now.

Try this instead:

function drop(ctl,id)
{
   var value = ctl.options[ctl.selectedIndex].value;

   if(value == "Ficha de pediatria"){
       window.top.location.href = "print.jsp?id="+id+"&type=2";
   }
   else if (value == "Ficha normal"){
       window.top.location.href = "print.jsp?id="+id+"&type=1";
   }
}

<select id="select1" name="select1" onChange="drop(this,id);return false;">
<option>Imprimir:</option>
<option>Ficha de pediatria</option>
<option>Ficha normal</option>
</select>

[EDIT] A bit of explanation...

I think the issue is how it is accessing the DOM. I don't think that IE has a value property on a select. I think you have to get at it via the selected option. Also, I'm not sure that there is a top property in the global namespace, but you should be able to get at it via window.top to set the location. Finally, I made a slight improvement in that by specifying this as the argument, you can skip the element lookup and reference it directly from the control passed as the argument.

Answer 2

I see two possible reasons.

1 - The way the function is declared. I've never seen it like that though I guess it works.

Maybe try the following and see if it still does not work:

function drop(id)
{
    // same code
}

---

2 - The return false in IE does not always behave properly (trust me, it depends on the computer) So instead of returning false, try:

onChange="drop(id);event.returnValue=false;return false;"

If possible create a method like this one:

function CrossBrowserFalse()
{
     if(IE) // use whatever you want to detect IE
     {
         event.returnValue = false;
     }

     return false;
}

and then in your methods you can use:

onChange="drop(id);return CrossBrowserFalse();"

...yeah, IE is weird sometimes (often)

---

If these two fail, at least make sure your drop function is called by putting some alerts in there or breakpoints if your IDE supports it for javascript.

Answer 3

It's not that IE "doesn't have .value" of a <select> element, it's that you haven't specified any values for your <option> elements. Firefox, Safari, and co. are likely protecting you from this mistake. Nevertheless, your element should be constructed as:

<select ...>
<option value="Imprimir">Imprimir:</option>
<option value="Ficha de pediatria">Ficha de pediatria</option>
<option value="Ficha normal">Ficha normal</option>
</select>

...and you'll see more standard x-browser behavior for the <select>'s .value property.

Answer 4

IE doesn't like the way you're grabbing the value of the select

document.getElementById("select1").value

This is saying "give me the text that's in the value attribute of the selected option in the select element with the id select1. Your options don't have any values. When Firefox and Safari encounter this ambiguity, they return the text of the selected option. When Internet Explorer encounters this ambiguity, it returns a blank string. Your javascript would work as is if you did something like

<select id="select1" name="select1" onChange="drop(this,id);return false;">
    <option value="Imprimir:">Imprimir:</option>
    <option value="Ficha de pediatria">Ficha de pediatria</option>
    <option value="Ficha normal">Ficha normal</option>
</select>

If that's not possible, you'll want to grab the text of the option that's selected.

var theSelect = document.getElementById("select1");
var theValue  = theSelect.options[theSelect.selectedIndex].text

Finally, while not your direct question, a the hard coded select1 isn't the best way to get at the select list. Consider using the this keyword

function foo(theSelect){
    alert(theSelect.options);
}

...

<select id="whatever" onchange="foo(this);">
...
</select>

This is a bit more generic, and you'll be able to use your function on a select with any ID.