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

    Selection of item / items in multi select box

    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.

    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)
    {
       //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:
    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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    takes time for the selection to be recognised
    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 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() ?
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    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)
    {
       //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


  •  

    Posting Permissions

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