Selecting all items in a multiple select: inconsistency with Internet Explorer

[james.dixon]

Hi

I was wondering if anyone else had had this problem before (can't find
anything on the web about it).

I have three select elements (list boxes - from here on I'll refer to
them as 'the list boxes'). Users can add and remove items from the
list boxes.

When the users are adding and removing items, the list boxes are single
selection only. However, when the form is submitted, I want ALL items
to be submitted. So I have written the following script,which ensures
that all elements in each box are selected when the user submits the
form. It works by programatically setting the list boxes to multiple,
and then selecting the controls in them:

function selectAllInLists()
{
var controlArray = new Array();
controlArray[0] = "bTelephone";
controlArray[1] = "bEmail";
controlArray[2] = "bWebsite";

for(var i=0;i<controlArray.length;i++)
{
var listWeb = document.getElementById(controlArray);
listWeb.multiple = true;

for(var j=0;j<listWeb.length;j++)
{
listWeb[j].selected = true;
}
}
}

This works fine with Firefox, and most of the time in Internet
Explorer. However, if the user wants to update an existing record, and
the list boxes have more than one element (each), and the user makes no
change to the list boxes (doesn't touch them), THEN only the last item
in each list box is passed when the form is submitted. Perplexing!!
I've tried a number of hacks, such as programmatically selecting the
list box when entering the page, and adding and deleting one
programmatically. No luck.

Any pointers would be greatly appreciated!

Cheers

James

 

[RobG]

Hi

I was wondering if anyone else had had this problem before (can't find
anything on the web about it).

I have three select elements (list boxes - from here on I'll refer to
them as 'the list boxes'). Users can add and remove items from the
list boxes.

When the users are adding and removing items, the list boxes are single
selection only. However, when the form is submitted, I want ALL items
to be submitted. So I have written the following script,which ensures
that all elements in each box are selected when the user submits the
form. It works by programatically setting the list boxes to multiple,
and then selecting the controls in them:

function selectAllInLists()
{
var controlArray = new Array();
controlArray[0] = "bTelephone";
controlArray[1] = "bEmail";
controlArray[2] = "bWebsite";

This could be written as:

var controlArray = [
"bTelephone",
"bEmail",
"bWebsite"
];

for(var i=0;i<controlArray.length;i++)
{
var listWeb = document.getElementById(controlArray);
listWeb.multiple = true;

for(var j=0;j<listWeb.length;j++)
{
listWeb[j].selected = true;
}
}
}

This works fine with Firefox, and most of the time in Internet
Explorer. However, if the user wants to update an existing record, and
the list boxes have more than one element (each), and the user makes no
change to the list boxes (doesn't touch them), THEN only the last item
in each list box is passed when the form is submitted. Perplexing!!
I've tried a number of hacks, such as programmatically selecting the
list box when entering the page, and adding and deleting one
programmatically. No luck.

Any pointers would be greatly appreciated!

Have you considered writing the values to a hidden input? Then ignore
whatever values you get from the selects. You can format the value of
the hidden input to whatever suits your server parser.

If JavaScript is not available on the client you will get junk, but
since your form is already dependent on JavaScript perhaps that's not an
issue for you.

 

[Matt Kruse]

Have you considered writing the values to a hidden input? Then ignore
whatever values you get from the selects.

Like I've done here, in a library that you might be able to just plug in:
http://www.javascripttoolbox.com/optiontransfer/

Hope that helps!

 

[james.dixon]

Thanks Rob, I did as you suggested, and it works. Still a real pain
though - I wonder if that is an identified bug?