...

View Full Version : select box mulitple selection and form submit using onkeyup and onmouseup



Vijay Venkat
02-07-2007, 10:26 AM
I have a page which has many select boxes (filter options. These allow only one value to be selected) and one select box which allows multiple selection. On choosing a different value in select box (onchange event), triggers a submit to the server and fetches data and this is displayed to the user in a table below these select boxes.

Similary, it is necessary to perform the same action on the multiselect box in the page. I cannot use on change, because every click will cause a submit and rattle the user and this is not what is required. The aim is, once the user has finished his selection, say after a click or choosing multiple items, a sumbit should happen. This is what i am trying to achieve. To achieve this i am using onkeyup and onmouseup event to do this.
In onkeyup amd onmouseup event i make sure i don't post, if the user is holding the ctrl or shift key. While trying to do so, i am seeing a strange problem. When i click on a option in the select box, the selection is not clearly identified as selected. If i select more than one item, then this shows up fine.

My version of the code is:


<!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)
{
if (e.type == "mouseup" && !(isShiftKeyMask(e) || isCtrlKeyMask(e)))
{

document.testForm.action=
alert('mouseup');
}
//keyCode - 16 SHIFT
//keyCode - 17 CTLR
//keyCode - 38 UpArrow
//keyCode - 40 DownArrow
// 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)))
{
//document.testForm.submit();
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 getSelectedString()
{

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

var selectedIndexes ="";
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">
<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>



To see the problem, click on one item in the select box, the selected item is marked in the ui, but the selction value is not set. This is the real problem.
Why is this happening? When i sumbit, the selection state is not there.
Now select two items, this will show the selection state of two items.

I have simulated this to be shown in alert message. It shows the items selected at different indexes.

Can anyone let me know what the cause of the problem is, or let me know how to achieve my requirement. Any hints / links / suggestions is highly appreciated.

Thanks,
Vijay Venkat

Vijay Venkat
02-15-2007, 04:49 AM
Folks,
I havent got any lead, which is pretty unusual in this forum. Am i missing something or is it such a dumb question kindly say something.

Vijay Venkat



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum