options or selectedIndex property works in Firefox, not IE

[CFonville]

I have a script that is working fine in the latest version of Firefox
with no errors or warnings, but does not work in IE. I have several
select boxes that, when changed, update some text (a price) on the
page. I'm checking what value is selected with an if statement,
setting a variable, then later updating the page. Here's the code that
gives me an "Object doesn't support this property or method" in IE but
works in Firefox:

if (document.order.cpu.options[document.order.cpu.selectedIndex].value
== "sempron3000") {var cpu = 85;}

the form is named order, and cpu is the select box name. The
"sempron3000" is the value I've given the option. Why is this working
in Firefox but not in Internet Explorer? Thank you in advance for your
help,
Chris

 

[RobG]

I have a script that is working fine in the latest version of Firefox
with no errors or warnings, but does not work in IE. I have several
select boxes that, when changed, update some text (a price) on the
page. I'm checking what value is selected with an if statement,
setting a variable, then later updating the page. Here's the code that
gives me an "Object doesn't support this property or method" in IE but
works in Firefox:

if (document.order.cpu.options[document.order.cpu.selectedIndex].value
== "sempron3000") {var cpu = 85;}

When posting code, post a minimal working example that demonstrates the
issue, or post a link. The following displays the described behaviour:


<script type="text/javascript">

function checkIt()
{
var x = document.order.cpu;
if (x.options[x.selectedIndex].value == "sempron3000") {
var cpu = 85;
}
alert(cpu);
}

</script>

<form name="order" action="">
<div>
<select name="cpu">
<option>sempron3000</option>
<option>blah</option>
</select>
<input type="button" value="Check value"
onclick="checkIt();">
</div>
</form>

the form is named order, and cpu is the select box name. The
"sempron3000" is the value I've given the option. Why is this working
in Firefox but not in Internet Explorer? Thank you in advance for your
help,

I suspect that you problem is that you haven't defined a value for the
option in the source HTML. The W3C HTML spec says that if no value
attribute is provided, the value of an option its content.

<URL:http://www.w3.org/TR/html4/interact/forms.html#adef-value-OPTION>

However, IE doesn't do that. If you don't give the option a value, you
have to explicitly get the option's text property.

There are two solutions: give the option value attribute a value or use
the text attribute.

Note that the code, as posted, has no syntax errors though it could be
much more concise. In your case, the value of the option could be '85'
and the text 'Sempron3000'. Now to get a value for local variable 'cpu'
you just get the value of the selected option, e.g.


<script type="text/javascript">
function checkIt()
{
var x = document.order.cpu;
var cpu = x.options[x.selectedIndex].value;
alert(cpu);
}
</script>

<form name="order" action="">
<div>
<select name="cpu">
<option value="85">sempron3000</option>
<option value="12">blah</option>
</select>
<input type="button" value="Check value"
onclick="checkIt();">
</div>
</form>

 

[VK]

I have a script that is working fine in the latest version of Firefox
with no errors or warnings, but does not work in IE. I have several
select boxes that, when changed, update some text (a price) on the
page. I'm checking what value is selected with an if statement,
setting a variable, then later updating the page. Here's the code that
gives me an "Object doesn't support this property or method" in IE but
works in Firefox:

"Object doesn't support this property or method" w/o any visible reason
in IE may indicate a name conflict, because if IE's extra name space
for ID's.

Do you have by any chance a HTML element on your page with ID "order"
or "cpu"? Seems like the case.

Try explicit notation istead:

var sel = document.forms'[order'].elements['cpu'];
if (sel.options[sel.selectedIndex].value == "sempron3000")
{var cpu = 85;}

 

[RobG]

VK wrote:
[...]

Try explicit notation istead:

var sel = document.forms'[order'].elements['cpu'];

--------------------------^

var sel = document.forms['order'].elements['cpu'];

[...]

 

[VK]

VK wrote:
[...]

Try explicit notation istead:

var sel = document.forms'[order'].elements['cpu'];

--------------------------^

var sel = document.forms['order'].elements['cpu'];

[...]

Right! Thank you for correcting my typo.


P.S. Oh boy, here is comes now...

 

[CFonville]

I don't guess I made it clear in my first post but I did give all my
options values. The problem was that I did have span elements on the
page with the same name, however I still received the error using the
explicit notation. I tried changing the names of the spans and it
works perfectly now. Thank you very much for your help in pointing
that out.
Chris

 

[RobG]

I don't guess I made it clear in my first post but I did give all my
options values. The problem was that I did have span elements on the
page with the same name

Span elements don't have a name attribute, so that is invalid HTML.

however I still received the error using the
explicit notation.

Perhaps a consequence of IE's model of making NAMEs and IDs global
variables combined with how it supports invalid HTML.

[...]

 

[CFonville]

I just said "name", I used the id attribute. Sorry for the confusion.
I'm just glad it's fixed. Thank you,
Chris