Form script won't work properly in IE

Discussion in 'Javascript' started by N. Demos, Mar 16, 2005.

  1. N. Demos

    N. Demos Guest

    I made a form in which the user selects two of three colors (Red, Green
    and Blue) with two select boxes. When the first select box color is
    chosen, an onChange handler populated the second select with the two
    remaining colors. Finally, when the second select box color is chosen,
    an onChange handler places the text of the remaining color in a text box.

    The form is submitted with the 'Get' method to itself and form fields
    are re-assigned and selected from the respective querystring values (The
    page will do other things with this data, but I need to get this to work
    for now.)

    The problem I'm having in IE is that after a submit, the correct value
    in the second color select box is not selected. The box is populated
    correctly, but the value for that field from the querystring is not
    selected. I'm really baffled by this as I'm using the same function in
    the first select to perform the selection and is does work correctly
    there. The URLs for the files are posted below. Any help would be
    appreciated.

    http://home.att.net/~ndemos/ColorPalletDBug.js
    http://home.att.net/~ndemos/ColorPalletDBug.html
    http://home.att.net/~ndemos/ColorPallet.css

    Thanks and Regards,
    N. Demos

    --
    Change "seven" to a digit to email me.
     
    N. Demos, Mar 16, 2005
    #1
    1. Advertising

  2. N. Demos

    kaeli Guest

    In article <31_Zd.142457$>,
    enlightened us with...
    >
    > The problem I'm having in IE is that after a submit, the correct value
    > in the second color select box is not selected.


    I have best results cross-browser setting the selectedIndex as well as
    setting the option selected property. In that order.

    It appears you are only setting selectedIndex to the value. There was a lot
    of code there, so maybe I missed it...?

    If not, try
    document.formname.selectname.selectedIndex = someInt;
    document.formname.selectname.options[someInt].selected = true;

    --
    --
    ~kaeli~
    Suicide is the most sincere form of self-criticism.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Mar 16, 2005
    #2
    1. Advertising

  3. N. Demos

    N. Demos Guest

    kaeli wrote:
    > In article <31_Zd.142457$>,
    > enlightened us with...
    >
    >>The problem I'm having in IE is that after a submit, the correct value
    >>in the second color select box is not selected.

    >
    >
    > I have best results cross-browser setting the selectedIndex as well as
    > setting the option selected property. In that order.
    >
    > It appears you are only setting selectedIndex to the value. There was a lot
    > of code there, so maybe I missed it...?
    >
    > If not, try
    > document.formname.selectname.selectedIndex = someInt;
    > document.formname.selectname.options[someInt].selected = true;
    >


    kaeil,
    Thank you, that worked. I'm still wondering why the original code works
    on the first select, but not on the second.

    Regards,
    N. Demos

    --
    Change "seven" to a digit to email me.
     
    N. Demos, Mar 16, 2005
    #3
  4. N. Demos

    N. Demos Guest

    N. Demos wrote:

    > kaeli wrote:
    >
    >> In article
    >> <31_Zd.142457$>,
    >> enlightened us with...
    >>
    >>> The problem I'm having in IE is that after a submit, the correct
    >>> value in the second color select box is not selected.

    >>
    >>
    >>
    >> I have best results cross-browser setting the selectedIndex as well as
    >> setting the option selected property. In that order.
    >>
    >> It appears you are only setting selectedIndex to the value. There was
    >> a lot of code there, so maybe I missed it...?
    >>
    >> If not, try
    >> document.formname.selectname.selectedIndex = someInt;
    >> document.formname.selectname.options[someInt].selected = true;
    >>

    >
    > kaeil,
    > Thank you, that worked. I'm still wondering why the original code works
    > on the first select, but not on the second.
    >
    > Regards,
    > N. Demos
    >

    OK, I take this back. It doesn't work. At least not without an alert
    statement in the function SetSelectedIndexOnSelect_Elt(). For some
    strange reason this will work on the second select in IE, if there is an
    alert statement in the function. Otherwise it does not.

    I did try to implement the solution you offered kaeli, but IE doesn't
    recognize "document.formname.selectname.options[someInt].selected". This
    could be a mistake in the DOM syntax on my part.

    Regards,
    N. Demos

    --
    Change "seven" to a digit to email me.
     
    N. Demos, Mar 16, 2005
    #4
  5. N. Demos

    kaeli Guest

    In article <_g2_d.143177$>,
    enlightened us with...
    > >

    > OK, I take this back. It doesn't work. At least not without an alert
    > statement in the function SetSelectedIndexOnSelect_Elt().


    That's usually a sign of a problem with your code's timing. You have too much
    code to test all at once. You should break it down into small test pieces so
    you can more easily trace the error.

    This simple test works fine in FF and MSIE.
    Watch for word-wrapping.
    (save as test.html or some such, open in browser, then select a month and
    click submit. the month will be chosen again.)

    Most relevant sections:
    elementMonth = document.forms["f1"].elements["month"];
    ....
    elementMonth.SelectedIndex = i;
    elementMonth.options.selected = true;

    ===========================================================

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> New Document </title>
    <script language="javascript" type="text/javascript">
    function fillForm()
    {
    var paramArray = new Array();
    // split the query string into param=val pieces
    var qs = location.search.substr(location.search.indexOf("?")+1);
    qs = qs.split("&");
    // split param and value into individual pieces
    for (var i=0; i<qs.length; i++)
    {
    tmp = qs.split("=");
    paramArray[tmp[0]] = tmp[1];
    }

    // loop through select and select value
    elementMonth = document.forms["f1"].elements["month"];
    tLength = elementMonth.length;
    for (var i=0; i<tLength; i++)
    {
    if (elementMonth.options.value == paramArray["month"])
    {
    // cross-browser; do both
    elementMonth.SelectedIndex = i;
    elementMonth.options.selected = true;
    }
    }
    if (typeof paramArray["qty"] != "undefined")
    {
    tText.value=paramArray["qty"];
    }
    }
    </script>
    </head>

    <body onLoad="fillForm()">
    <form name="f1" id="f1" action="" method="get">
    <select name="month" id="month">
    <option value='January' selected>January</option>
    <option value='February'>February</option>
    <option value='March'>March</option>
    <option value='April'>April</option>
    <option value='May'>May</option>
    <option value='June'>June</option>
    <option value='July'>July</option>
    <option value='August'>August</option>
    <option value='September'>September</option>
    <option value='October'>October</option>
    <option value='November'>November</option>
    <option value='December'>December</option>
    </select>
    <br>
    <input type="submit" value="submit">
    </form>
    </body>
    </html>

    --
    --
    ~kaeli~
    Do not taunt Happy Fun Ball!
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
     
    kaeli, Mar 17, 2005
    #5
  6. N. Demos

    N. Demos Guest

    kaeli wrote:

    > In article <_g2_d.143177$>,
    > enlightened us with...
    >
    >>OK, I take this back. It doesn't work. At least not without an alert
    >>statement in the function SetSelectedIndexOnSelect_Elt().

    >
    >
    > That's usually a sign of a problem with your code's timing. You have too much
    > code to test all at once. You should break it down into small test pieces so
    > you can more easily trace the error.
    >
    > This simple test works fine in FF and MSIE.
    > Watch for word-wrapping.
    > (save as test.html or some such, open in browser, then select a month and
    > click submit. the month will be chosen again.)
    >
    > Most relevant sections:
    > elementMonth = document.forms["f1"].elements["month"];
    > ...
    > elementMonth.SelectedIndex = i;
    > elementMonth.options.selected = true;
    >


    Kaeli,
    Thanks again for responding. The problem was not with how the select
    option was being 'selected', in the second select list, but in how the
    list itself was being populated.

    I originally was using the DOM method document.createElement('OPTION');
    to create each option item and then appending it to the select list
    (code below).

    =================== Start Code =======================
    eltT = document.getElementById('selColor2');
    i1 = ColorChannelOrderList.getIndex(elt.options[elt.selectedIndex].value)

    for(i = 0; i1 > -1 && i < 3; i++){
    if(i != i1){
    eltNew = document.createElement('OPTION');
    eltNew.value = ColorChannelOrderList;
    eltNew.innerHTML = ColorChannelOrderList;
    eltT.appendChild(eltNew);
    }
    }
    ==================== End Code =======================


    I replaced this with the following code utilizing new Option(...),
    instead of the createElement to create the option items. This completely
    fixed the problem I was having in IE selecting the option. The list was
    generated correctly in the old method, but it couldn't be manipulated
    progammatically. I'm not sure why this is a problem in IE.


    =================== Start Code =======================
    // If Color selected in selColor1 (re)populate selColor2 with all but
    that color.
    for(i = 0, j = 1; i1 > -1 && i < ColorChannelOrderList.length; i++){
    if(i != i1){
    eltSelect2.options[j++] = new Option(ColorChannelOrderList,
    ColorChannelOrderList,
    false, i == i2);
    }
    }
    ==================== End Code =======================

    Thanks again and Regards,
    N. Demos

    --
    Change "seven" to a digit to email me.
     
    N. Demos, Mar 17, 2005
    #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. Chad
    Replies:
    4
    Views:
    8,343
  2. Parzival
    Replies:
    1
    Views:
    320
    Jeff Epler
    Nov 8, 2003
  3. Mike

    Form Doesn't Work Properly

    Mike, Dec 21, 2003, in forum: ASP General
    Replies:
    1
    Views:
    132
    Evertjan.
    Dec 21, 2003
  4. Dominic Son

    My Script/Console Won't work..

    Dominic Son, Feb 1, 2007, in forum: Ruby
    Replies:
    4
    Views:
    180
    Dominic Son
    Feb 1, 2007
  5. jackster the jackle

    Net::Telnet won't close properly

    jackster the jackle, Dec 16, 2007, in forum: Ruby
    Replies:
    0
    Views:
    111
    jackster the jackle
    Dec 16, 2007
Loading...

Share This Page