Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Form script won't work properly in IE

Reply
Thread Tools

Form script won't work properly in IE

 
 
N. Demos
Guest
Posts: n/a
 
      03-16-2005
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.
 
Reply With Quote
 
 
 
 
kaeli
Guest
Posts: n/a
 
      03-16-2005
In article <31_Zd.142457$(E-Mail Removed)>,
http://www.velocityreviews.com/forums/(E-Mail Removed) 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

 
Reply With Quote
 
 
 
 
N. Demos
Guest
Posts: n/a
 
      03-16-2005
kaeli wrote:
> In article <31_Zd.142457$(E-Mail Removed)>,
> (E-Mail Removed) 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.
 
Reply With Quote
 
N. Demos
Guest
Posts: n/a
 
      03-16-2005
N. Demos wrote:

> kaeli wrote:
>
>> In article
>> <31_Zd.142457$(E-Mail Removed)>,
>> (E-Mail Removed) 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.
 
Reply With Quote
 
kaeli
Guest
Posts: n/a
 
      03-17-2005
In article <_g2_d.143177$(E-Mail Removed)>,
(E-Mail Removed) 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[i].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[i].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[i].value == paramArray["month"])
{
// cross-browser; do both
elementMonth.SelectedIndex = i;
elementMonth.options[i].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

 
Reply With Quote
 
N. Demos
Guest
Posts: n/a
 
      03-17-2005
kaeli wrote:

> In article <_g2_d.143177$(E-Mail Removed)>,
> (E-Mail Removed) 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[i].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[i];
eltNew.innerHTML = ColorChannelOrderList[i];
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[i],
ColorChannelOrderList[i],
false, i == i2);
}
}
==================== End Code =======================

Thanks again and Regards,
N. Demos

--
Change "seven" to a digit to email me.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
pyserial script doesnt execute properly kishore Python 7 03-10-2010 08:39 AM
My "Hello World" script is not displaying properly laredotornado@zipmail.com Ruby 1 02-01-2007 08:31 PM
FAA update site not decoding java script properly with FF 1.5.01 Larry Firefox 7 02-08-2006 11:06 PM
Form Doesn't Work Properly Mike ASP General 1 12-21-2003 09:17 AM
More American Graffiti: Properly Framed, Properly Scored? Scot Gardner DVD Video 0 09-02-2003 02:28 AM



Advertisments