SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Move item in list box

    Hello,

    I have 2 list boxes on my page and a button (Move Up) When the user clicks on the Move UP button, he should be able to move the selected item up in the list box. my MoveItemUp function works just fine if I only had 1 list box on my page, but I can't figuer out how to distinguish which item in what box is selected and the user is trying to move up.
    Is there a why for me to pick up where the focus is at when the MoveUp function gets called... or can anybody think of a way to
    help me solve this. any help is appreicated. Thank.
    Code:
    <HTML>
    <script langauge="javascript">
    function MoveItemUp(listField)
    
    {
    	var Ele = document.getElementById(listField);
    	var selectedItm = Ele.selectedIndex;
    
    	if ( Ele.length == -1)
    	{
    		alert('There are no values which can be moved');
    	}
    	else
    	{
    		if (selectedItm == -1)
    		{
    			alert('You must select an entry to be moved');
    		}
    		else
    		{
    			if ( Ele.length == 0 )
    			{
    				alert('There is only one entry');
    			}
    			else
    			{
    				if ( selectedItm == 0 )
    				{
    					alert('The first entry in the list cannot be moved up');
    				}
    				else
    				{
    					var moveText1 = Ele[selectedItm-1].text;
    					var moveText2 = Ele[selectedItm].text;
    					var moveValue1 = Ele[selectedItm-1].value;
    					var moveValue2 = Ele[selectedItm].value;
    					Ele[selectedItm].text = moveText1;
    					Ele[selectedItm].value = moveValue1;
    					Ele[selectedItm-1].text = moveText2;
    					Ele[selectedItm-1].value = moveValue2;
    					Ele.selectedIndex = selectedItm-1;
    				}
    			}
    		}
    	}
    }
    </script>
    <BODY>
    <FORM>
    
    <select name="tag1" id="tag1" size="3" STYLE="WIDTH: 200px">
    <option value="0">TEST1</option>
    <option value="1">TEST2</option>
    </select>
    
    <button name="btnMoveUp" id="btnMoveUp" value="Move Up" onClick="MoveItemUp('tag1');" >Move Up</Button>
    
    <select name="tag2" id="tag2" size="3" STYLE="WIDTH: 200px">
    <option value="0">TEST3</option>
    <option value="1">TEST4</option>
    </select>
    </FORM>
    </BODY>
    </HTML>

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:

    <HTML>
    <
    script langauge="javascript">
    var 
    Ele;

    function 
    MoveItemUp()

    {
    //    var Ele = document.getElementById(listField);
        
    var selectedItm Ele.selectedIndex;

        if ( 
    Ele.length == -1)
        {
            
    alert('There are no values which can be moved');
        }
        else
        {
            if (
    selectedItm == -1)
            {
                
    alert('You must select an entry to be moved');
            }
            else
            {
                if ( 
    Ele.length == )
                {
                    
    alert('There is only one entry');
                }
                else
                {
                    if ( 
    selectedItm == )
                    {
                        
    alert('The first entry in the list cannot be moved up');
                    }
                    else
                    {
                        var 
    moveText1 Ele[selectedItm-1].text;
                        var 
    moveText2 Ele[selectedItm].text;
                        var 
    moveValue1 Ele[selectedItm-1].value;
                        var 
    moveValue2 Ele[selectedItm].value;
                        
    Ele[selectedItm].text moveText1;
                        
    Ele[selectedItm].value moveValue1;
                        
    Ele[selectedItm-1].text moveText2;
                        
    Ele[selectedItm-1].value moveValue2;
                        
    Ele.selectedIndex selectedItm-1;
                    }
                }
            }
        }
    }
    </script>
    <BODY>
    <FORM>

    <select name="tag1" id="tag1" size="3" STYLE="WIDTH: 200px" onclick="javascript:Ele=this;">
    <option value="0">TEST1</option>
    <option value="1">TEST2</option>
    </select>

    <button name="btnMoveUp" id="btnMoveUp" value="Move Up" onClick="MoveItemUp('tag1');" >Move Up</Button>

    <select name="tag2" id="tag2" size="3" STYLE="WIDTH: 200px" onclick="javascript:Ele=this;">
    <option value="0">TEST3</option>
    <option value="1">TEST4</option>
    </select>
    </FORM>
    </BODY>
    </HTML> 
    not need for ids or names with this method

    could also have used onfocus (probable better)

  3. #3
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply,

    I created a global variable called CtrlName and a function ItemWithFocus that I call onFocus from the <select> element. whenver the focus gets set on a specific select box, my MoveUp function references the CtrlName variable and uses it to perform the task.

    PHP Code:
    var CtrlName null;
    function 
    ItemWithFocus(ControlName)
    {
        
    CtrlName document.getElementById(ControlName);



Bookmarks

Posting Permissions

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