options or selectedIndex property works in Firefox, not IE

Discussion in 'Javascript' started by CFonville@gmail.com, Feb 14, 2006.

  1. Guest

    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
     
    , Feb 14, 2006
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > 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>



    --
    Rob
     
    RobG, Feb 14, 2006
    #2
    1. Advertising

  3. VK Guest

    wrote:
    > 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;}
     
    VK, Feb 14, 2006
    #3
  4. RobG Guest

    VK wrote:
    [...]
    >
    > Try explicit notation istead:
    >
    > var sel = document.forms'[order'].elements['cpu'];

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

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

    [...]


    --
    Rob
     
    RobG, Feb 14, 2006
    #4
  5. VK Guest

    RobG wrote:
    > 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... :)
     
    VK, Feb 14, 2006
    #5
  6. Guest

    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
     
    , Feb 14, 2006
    #6
  7. RobG Guest

    wrote:
    > 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.

    [...]


    --
    Rob
     
    RobG, Feb 14, 2006
    #7
  8. Guest

    I just said "name", I used the id attribute. Sorry for the confusion.
    I'm just glad it's fixed. Thank you,
    Chris
     
    , Feb 15, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ashish Sharma

    DropDownList SelectedIndex Property

    Ashish Sharma, Apr 9, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    8,596
    Ashish Sharma
    Apr 12, 2004
  2. Tony Z
    Replies:
    1
    Views:
    148
    quaester
    Mar 9, 2005
  3. Robert Oschler
    Replies:
    2
    Views:
    310
    cosmic foo
    Jul 29, 2005
  4. Alexandre Jaquet

    options[box1.selectedIndex].value trouble

    Alexandre Jaquet, Aug 30, 2005, in forum: Javascript
    Replies:
    2
    Views:
    115
    Alexandre Jaquet
    Aug 31, 2005
  5. jgabios
    Replies:
    5
    Views:
    150
    Jeremy J Starcher
    Apr 22, 2009
Loading...

Share This Page