Form script won't work properly in IE

[N. Demos]

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

 

[kaeli]

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;

--

 

[N. Demos]

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

 

[N. Demos]

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

 

[kaeli]

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>

--

 

[N. Demos]

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