Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    select box mulitple selection and form submit using onkeyup and onmouseup

    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:
    Code:
    <!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

  • #2
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •