Selection of item / items in multi select box

Vijay Venkat

02-22-2007, 05:25 AM

I have a multiselet box in which i identify the selected items. Once the user has finished selecting the items it causes the form to be submitted. For this example it just shows the selected indexes. To see the problem. Copy paste the code and save as html file. Then click on an item in the select box.

I am having problem with indentifying the selected items. When only one element is selected, the selected option index does not come up fine. I have no clue as to why this is the case.

See code below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script>

function callAction(e)
{
//alert("MAGIC" + e.type);

if (e.type == "mouseup" && !(isShiftKeyMask(e) || isCtrlKeyMask(e)))
{
getSelectedString();
}
// submit if he is navigating / but not while he is holding ctrl or shift
// and naviating.
// and if selection has not changed - TODO
else if (e.type == "keyup" && (getKeyCode(e) == 16 || getKeyCode(e) == 17
|| getKeyCode(e) == 38 || getKeyCode(e) == 40 ) &&
!(isShiftKeyMask(e) || isCtrlKeyMask(e)))
{
getSelectedString();
}
else
{
//alert('dono');
}
}

function getKeyCode(event)
{
if (window.event)
return window.event.keyCode; //IE
else if (event)
return event.which; // GECKO
return -1;
}
function getValue(event)
{
alert(getKeyCode(event));
alert(isShiftKeyMask(event));
}

function callAlert()
{
alert('Called me');
}

function getSelectedString()
{

var selElm = document.getElementById("xyz");

var selectedIndexes ="";
//alert( '**' + selElm.selectedIndex);
for (var i=0; i < selElm.options.length ; ++i )
{
var option = selElm.options[i];
selectedIndexes = selectedIndexes + " index[" + i + "]=" + option.selected;
}
alert(selectedIndexes);
}

function isShiftKeyMask(e)
{
var theEvent = getEvent(e);
//alert('The Event is ' + theEvent);

if (theEvent.modifiers)
{
return ((theEvent.modifiers & Event.SHIFT_MASK) == Event.SHIFT_MASK);
}
else
{
//alert('Shift key ' + theEvent.shiftKey);
return theEvent.shiftKey;
}
}

function isCtrlKeyMask(e)
{
var theEvent = getEvent(e);
if (theEvent.modifiers)
{
return ((theEvent.modifiers & Event.CTRL_MASK) == Event.CTRL_MASK)
}
else
{
//alert('Ctrl key ' + theEvent.ctrlKey);
return theEvent.ctrlKey
}
}

function getEvent(e)
{
if (!e)
{
return window.event;
}
return e;
}

</script>
</head>

<body>
<form name="testForm" method="GET" action="IdontKnow.html">
<input type="text" name="aa" />
<select id="xyz" name="xyz" size="3" multiple onkeyup="callAction(event);" onmouseup="callAction(event);" >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

</form>
</body>

</html>

There is a strange behaviour:
See the first line in code:

function callAction(e)
{
//alert("MAGIC" + e.type); //<----

Uncomment and then try clicking on a item, then the selected index comes fine. If this is commented again then the strange behaviour shows up.

Note: the selected indexes alert will not showup if control key or shift key is kept pressed.

Can someone let me know what is the cause of the problem. As you all know, i cannot have an alert. Am i doing something wrong? or missing something obvious, is there a better way to achieve it?

Thanks,
Vijay Venkataraman

vwphillips

02-22-2007, 12:27 PM

takes time for the selection to be recognised

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script>

function getSelectedString()
{

var selElm = document.getElementById("xyz");

var selectedIndexes ="";
//alert( '**' + selElm.selectedIndex);
for (var i=0; i < selElm.options.length ; ++i ) {
var option = selElm.options[i];
selectedIndexes +=" index[" + i + "]=" + option.selected;
}
alert(selectedIndexes);
}

</script>
</head>

<body>
<form name="testForm" method="GET" action="IdontKnow.html">
<input type="text" name="aa" />
<select id="xyz" name="xyz" size="3" multiple >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

</form>
<input type="button" name="" value="Test" onclick="getSelectedString();">

</body>

</html>

try a timeout calling getSelectedString() ?

Vijay Venkat

02-23-2007, 12:54 AM

Hi Vic
Thanks for taking time and looking into the problem.

I did a timeout (setTimeout) on function getSelectedString with a 500 millisecond delay.
This solves the problem in fireFox and IE. Again, if the alert in the getSelectedString() is commented out, the problem still presists in IE.

In reality, in production environment getSelectedString() method will not exist, it will be replaced with a call to submit().

The code presented below, mimics the code, with form submission. It can be seen (in IE) when the form is submited, on click of a item in the select box, the selection state is not submitted. But if more than one item is selected, then things are fine as usual.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script>

function callAction(e)
{
//alert("MAGIC" + e.type);

if (e.type == "mouseup" && !(isShiftKeyMask(e) || isCtrlKeyMask(e)))
{
delay(1000);
getSelectedString();
document.forms[0].submit();
}
// submit if he is navigating / but not while he is holding ctrl or shift
// and naviating.
// and if selection has not changed - TODO
else if (e.type == "keyup" && (getKeyCode(e) == 16 || getKeyCode(e) == 17
|| getKeyCode(e) == 38 || getKeyCode(e) == 40 ) &&
!(isShiftKeyMask(e) || isCtrlKeyMask(e)))
{
delay(1000);
getSelectedString();
document.forms[0].submit();
}
else
{
//alert('dono');
}
}

//Blank
function delay(delay)
{
setTimeout("doNothing()", delay);
}

// This does nothing. This is here
// For introducing dealy.
function doNothing()
{
// DONOTHING.
}

function getKeyCode(event)
{
if (window.event)
return window.event.keyCode; //IE
else if (event)
return event.which; // GECKO
return -1;
}
function getValue(event)
{
alert(getKeyCode(event));
alert(isShiftKeyMask(event));
}

function callAlert()
{
alert('Called me');
}

function getSelectedString()
{

var selElm = document.getElementById("xyz");
var txtElm = document.getElementById("textElm");
txtElm.value = "";
var selectedIndexes ="";
//alert( '**' + selElm.selectedIndex);
for (var i=0; i < selElm.options.length ; ++i )
{
var option = selElm.options[i];
selectedIndexes = selectedIndexes + " index[" + i + "]=" + option.selected;
if (option.selected)
{
txtElm.value = txtElm.value + ":" + option.value;
}
}
//alert(selectedIndexes);
}

function isShiftKeyMask(e)
{
var theEvent = getEvent(e);
//alert('The Event is ' + theEvent);

if (theEvent.modifiers)
{
return ((theEvent.modifiers & Event.SHIFT_MASK) == Event.SHIFT_MASK);
}
else
{
//alert('Shift key ' + theEvent.shiftKey);
return theEvent.shiftKey;
}
}

function isCtrlKeyMask(e)
{
var theEvent = getEvent(e);
if (theEvent.modifiers)
{
return ((theEvent.modifiers & Event.CTRL_MASK) == Event.CTRL_MASK)
}
else
{
//alert('Ctrl key ' + theEvent.ctrlKey);
return theEvent.ctrlKey
}
}

function getEvent(e)
{
if (!e)
{
return window.event;
}
return e;
}

</script>
</head>

<body>
<form name="testForm" method="GET" action="http://google.com">
<input type="text" id="textElm" name="aa" />
<select id="xyz" name="SelElm" size="3" multiple onkeyup="callAction(event);" onmouseup="callAction(event);" >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

</form>
</body>

</html>

Again, thanks for the inputs.

Vijay Venkataraman