Javascript wierdness

Discussion in 'Javascript' started by Lorenzo Thurman, Aug 20, 2006.

  1. When using this code, I can get the value of the select. But this only
    works if the select is within a form. The commented code, which I think
    _should_ work, does not work whether it's in a form or not. This happens
    in both IE6 and Firefox 1.506 and also Flock 0.7.3.2.My javascript
    skills are not all that great, but am I missing something?
    Thanks

    function setStatusText(){

    //var index = document.getElementById('bridgeSelect').value;
    var str= document.forms['test'].options.value;
    document.getElementById('bridgeStatus').innerHTML = str;
    }


    ####################
    <body>
    <form name='test'>
    <div id="bridgeSelect"
    onchange="toggleBridgeStatus(false);setStatusText()"><select name="options">
    <option value="status" selected="yes">Status
    <option value="option1">Option1
    <option value="option2">Option2
    </select>
    </div>
    </form>
    </body>
    Lorenzo Thurman, Aug 20, 2006
    #1
    1. Advertising

  2. Lorenzo Thurman

    Lee Guest

    Lorenzo Thurman said:
    >
    >When using this code, I can get the value of the select. But this only
    >works if the select is within a form. The commented code, which I think
    >_should_ work, does not work whether it's in a form or not. This happens
    >in both IE6 and Firefox 1.506 and also Flock 0.7.3.2.My javascript
    >skills are not all that great, but am I missing something?
    >Thanks
    >
    >function setStatusText(){
    >
    > //var index = document.getElementById('bridgeSelect').value;
    > var str= document.forms['test'].options.value;
    > document.getElementById('bridgeStatus').innerHTML = str;
    >}
    >
    >
    >####################
    ><body>
    ><form name='test'>
    ><div id="bridgeSelect"


    bridgeSelect is a <DIV> element, and so doesn't have a "value".

    How to get the value of a form control:
    http://www.jibbering.com/faq/#FAQ4_13


    --
    Lee, Aug 20, 2006
    #2
    1. Advertising

  3. Lorenzo Thurman

    RobG Guest

    Lorenzo Thurman wrote:
    > When using this code, I can get the value of the select. But this only
    > works if the select is within a form. The commented code, which I think
    > _should_ work, does not work whether it's in a form or not. This happens
    > in both IE6 and Firefox 1.506 and also Flock 0.7.3.2.My javascript
    > skills are not all that great, but am I missing something?


    Yes, an understanding of HTML DOM element properties.


    > function setStatusText(){
    >
    > //var index = document.getElementById('bridgeSelect').value;


    The reason this line doesn't "work" is because
    document.getElementById('bridgeSelect') returns a reference to a div
    element, which is a standard HTML DOM element. If you look at the
    properties of a normal HTML DOM element, you will see that it doesn't
    have a "value" attribute/property:

    <URL: http://developer.mozilla.org/en/docs/DOM:element#Properties >


    > var str= document.forms['test'].options.value;


    In this line, you are using the document's forms collection to get a
    reference to the form named 'test', then to the select element named
    'options' whose value attribute (in W3C compliant browsers) is the value
    of the selected option.

    The most widely supported method (though I've forgotten the precise
    reason why it is used) is:

    var sel = document.forms['test'].elements['options'];
    var str = sel[sel.selectedIndex].value;


    The first line could be abbreviated to:

    var sel = document.test.options;


    <URL:
    http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTMLOptionsCollection >
    <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980 >


    I would not recommend calling a select element 'options', it is
    confusing to me as select elements have an options property that is a
    collection of all the options.


    > document.getElementById('bridgeStatus').innerHTML = str;
    > }
    >
    >
    > ####################
    > <body>
    > <form name='test'>
    > <div id="bridgeSelect"
    > onchange="toggleBridgeStatus(false);setStatusText()"><select
    > name="options">
    > <option value="status" selected="yes">Status
    > <option value="option1">Option1
    > <option value="option2">Option2
    > </select>
    > </div>
    > </form>
    > </body>



    --
    Rob
    RobG, Aug 20, 2006
    #3
  4. Lorenzo Thurman

    Randy Webb Guest

    RobG said the following on 8/19/2006 10:24 PM:

    <snip>

    > The most widely supported method (though I've forgotten the precise
    > reason why it is used) is:
    >
    > var sel = document.forms['test'].elements['options'];
    > var str = sel[sel.selectedIndex].value;


    It is a throw back to the Netscape 4 days when NN4.xx browsers wouldn't
    expose the value of a select element without going through the
    collection. It is covered, lightly, in the FAQ section 4.13

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Aug 20, 2006
    #4
  5. Lee wrote:
    > Lorenzo Thurman said:
    >> When using this code, I can get the value of the select. But this only
    >> works if the select is within a form. The commented code, which I think
    >> _should_ work, does not work whether it's in a form or not. This happens
    >> in both IE6 and Firefox 1.506 and also Flock 0.7.3.2.My javascript
    >> skills are not all that great, but am I missing something?
    >> Thanks
    >>
    >> function setStatusText(){
    >>
    >> //var index = document.getElementById('bridgeSelect').value;
    >> var str= document.forms['test'].options.value;
    >> document.getElementById('bridgeStatus').innerHTML = str;
    >> }
    >>
    >>
    >> ####################
    >> <body>
    >> <form name='test'>
    >> <div id="bridgeSelect"

    >
    > bridgeSelect is a <DIV> element, and so doesn't have a "value".
    >
    > How to get the value of a form control:
    > http://www.jibbering.com/faq/#FAQ4_13
    >
    >

    Thanks, I guess I need to work on my DOM also.
    Lorenzo Thurman, Aug 20, 2006
    #5
  6. RobG wrote:
    > Lorenzo Thurman wrote:
    >> When using this code, I can get the value of the select. But this only
    >> works if the select is within a form. The commented code, which I
    >> think _should_ work, does not work whether it's in a form or not. This
    >> happens in both IE6 and Firefox 1.506 and also Flock 0.7.3.2.My
    >> javascript skills are not all that great, but am I missing something?

    >
    > Yes, an understanding of HTML DOM element properties.
    >
    >
    >> function setStatusText(){
    >> //var index = document.getElementById('bridgeSelect').value;

    >
    > The reason this line doesn't "work" is because
    > document.getElementById('bridgeSelect') returns a reference to a div
    > element, which is a standard HTML DOM element. If you look at the
    > properties of a normal HTML DOM element, you will see that it doesn't
    > have a "value" attribute/property:
    >
    > <URL: http://developer.mozilla.org/en/docs/DOM:element#Properties >
    >
    >
    >> var str= document.forms['test'].options.value;

    >
    > In this line, you are using the document's forms collection to get a
    > reference to the form named 'test', then to the select element named
    > 'options' whose value attribute (in W3C compliant browsers) is the value
    > of the selected option.
    >
    > The most widely supported method (though I've forgotten the precise
    > reason why it is used) is:
    >
    > var sel = document.forms['test'].elements['options'];
    > var str = sel[sel.selectedIndex].value;
    >
    >
    > The first line could be abbreviated to:
    >
    > var sel = document.test.options;
    >
    >
    > <URL:
    > http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTMLOptionsCollection >
    > <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980 >
    >
    >
    > I would not recommend calling a select element 'options', it is
    > confusing to me as select elements have an options property that is a
    > collection of all the options.
    >
    >
    >> document.getElementById('bridgeStatus').innerHTML = str;
    >> }
    >>
    >>
    >> ####################
    >> <body>
    >> <form name='test'>
    >> <div id="bridgeSelect"
    >> onchange="toggleBridgeStatus(false);setStatusText()"><select
    >> name="options">
    >> <option value="status" selected="yes">Status
    >> <option value="option1">Option1
    >> <option value="option2">Option2
    >> </select>
    >> </div>
    >> </form>
    >> </body>

    >
    >

    Thanks, I guess I need to work on my DOM also.
    Lorenzo Thurman, Aug 20, 2006
    #6
    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. Terry Olsen

    Datagrid Cell Spacing Wierdness

    Terry Olsen, Mar 28, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    541
    Terry Olsen
    Mar 29, 2005
  2. danthman

    Wierdness with "Imports" statement

    danthman, Dec 16, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    1,168
    danthman
    Dec 16, 2005
  3. Larry
    Replies:
    0
    Views:
    382
    Larry
    Feb 17, 2006
  4. VisionSet
    Replies:
    0
    Views:
    377
    VisionSet
    Aug 29, 2004
  5. Tim Slattery

    Re: Date wierdness

    Tim Slattery, Oct 24, 2005, in forum: Java
    Replies:
    2
    Views:
    393
    Roedy Green
    Oct 25, 2005
Loading...

Share This Page