SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2005
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Moving data between two textareas, have bug

    I'm trying to move data between two textareas. I have a script i found but it isn't doing exactly what i need it to do. I believe this would be an easy fix for somebody that knows more about javascript then i do (which is limited)

    Here is the script held in the header,

    Code:
    <script language="javascript">
      function ClearList(OptionList, TitleName) 
        {   
        OptionList.length = 0;
        }
    
      function move(side, form_name)
    	  {   
    	   var temp1 = new Array();
    	   var temp2 = new Array();
    	   var current1 = 0;
    		 var current2 = 0;
    	   var attribute;
    		
    		//assign what select attribute treat as attribute1 and attribute2
    	  if (side == "right")
      		{  
      		 attribute1 = document.form_name.category_name; 
      		 attribute2 = document.form_name.category_selected;
      		}
    		else
      		{  
      		 attribute1 = document.form_name.category_selected;
      		 attribute2 = document.form_name.category_name;  
      		}
    		
    		//fill an array with old values
    		for (var i = 0; i < attribute2.length; i++)
    		  { 
    		  temp1[current1++] = attribute2.options[i].value;
    		  }
    		  
    		//assign new values to arrays
    		for (var i = 0; i < attribute1.length; i++)
    		  {   
    		  if (attribute1.options[i].selected)
    		    {  
    		     temp1[current1++] = attribute1.options[i].value;
    			  }
    			else
    			  {  
    			  temp2[current2++] = attribute1.options[i].value;
    			  }
    		  }
    		
    		//generating new options 
        for (var i = 0; i < temp1.length; i++)
    	    {  
    		   attribute2.options[i] = new Option();
    	     attribute2.options[i].value = temp1[i];
    	     attribute2.options[i].text =  temp1[i];
    	    }
    	    
    		//generating new options
    		ClearList(attribute1,attribute1);
    		if (temp2.length>0)
    		{	
    		  for (var i = 0; i < temp2.length; i++)
    		    {   
    		     attribute1.options[i] = new Option();
    		     attribute1.options[i].value = temp2[i];
    		     attribute1.options[i].text =  temp2[i];
    		    }
    		}
    	}
    	
    	
    //-->
    </script>
    here is how it's called,

    HTML Code:
    <form name="rep" method="post">
    <table>
      <tbody><tr>
    	<td>
    		<select name="category_name" multiple="multiple" size="5" style="" width="150px">
    		<option value="UCLA">UCLA</option>
    		<option value="LAPL">LAPL</option>
    		<option value="SMPL">SMPL</option>
    		<option value="Burbank">Burbank</option>
    		<option value="Tarzana">Tarzana</option>
    		<option value="Encino">Encino</option>
    		</select>
    	</td>
    	<td>
    		<input value="&gt;&gt;" onclick="move('right', 'rep')" type="button"><br>
    		<input value="&lt;&lt;" onclick="move('left', 'rep')" type="button">
    	</td>
    	<td>
    		<select name="category_selected" multiple="multiple" size="5" style="" width="150px">
    		
    		</select>
    	</td>
      </tr>
    </tbody></table>
    </form>
    Ok now i've changed it a little. I added the form_name as i can't have the form name hard coded into the function as this function will be used in multiple forms around the site but never more then once on any one form.

    the error i get is "form_name has no properties" also if i hard code the form name into the script it will move the data from one textarea to the other but will only move the values. Not the "label" and Value i need both to be moved to the second textarea.

    Anybody have any idea or guidance on how to resolve this?

  2. #2
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    Location
    South Dakota
    Posts
    215
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    you where right, really simple:

    HTML Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    </head>
    <script type="text/javascript">
      function ClearList(OptionList, TitleName) 
        {   
        OptionList.length = 0;
        }
    
      function move(side, form_name)
    	  {   
    	   var temp1 = new Array();
    	   var temp2 = new Array();
    	   var current1 = 0;
    		 var current2 = 0;
    	   var attribute;
    		
    		//assign what select attribute treat as attribute1 and attribute2
    	  if (side == "right")
      		{  
      		 attribute1 = document.getElementById('category_name'); 
      		 attribute2 = document.getElementById('category_selected');
      		}
    		else
      		{  
      		 attribute2 = document.getElementById('category_name'); 
      		 attribute1 = document.getElementById('category_selected');
      		}
    		
    		//fill an array with old values
    		for (var i = 0; i < attribute2.length; i++)
    		  { 
    		  temp1[current1++] = attribute2.options[i].value;
    		  }
    		  
    		//assign new values to arrays
    		for (var i = 0; i < attribute1.length; i++)
    		  {   
    		  if (attribute1.options[i].selected)
    		    {  
    		     temp1[current1++] = attribute1.options[i].value;
    			  }
    			else
    			  {  
    			  temp2[current2++] = attribute1.options[i].value;
    			  }
    		  }
    		
    		//generating new options 
        for (var i = 0; i < temp1.length; i++)
    	    {  
    		   attribute2.options[i] = new Option();
    	     attribute2.options[i].value = temp1[i];
    	     attribute2.options[i].text =  temp1[i];
    	    }
    	    
    		//generating new options
    		ClearList(attribute1,attribute1);
    		if (temp2.length>0)
    		{	
    		  for (var i = 0; i < temp2.length; i++)
    		    {   
    		     attribute1.options[i] = new Option();
    		     attribute1.options[i].value = temp2[i];
    		     attribute1.options[i].text =  temp2[i];
    		    }
    		}
    	}
    	
    
    </script>
    <body>
    <form name="rep" method="post">
    <table>
      <tbody><tr>
    	<td>
    		<select id="category_name" name="category_name" multiple="multiple" size="5" style="" width="150px">
    		<option value="UCLA">UCLA</option>
    		<option value="LAPL">LAPL</option>
    		<option value="SMPL">SMPL</option>
    		<option value="Burbank">Burbank</option>
    		<option value="Tarzana">Tarzana</option>
    		<option value="Encino">Encino</option>
    		</select>
    	</td>
    	<td>
    		<input value="&gt;&gt;" onclick="move('right', 'rep')" type="button"><br>
    		<input value="&lt;&lt;" onclick="move('left', 'rep')" type="button">
    	</td>
    	<td>
    		<select id="category_selected" name="category_selected" multiple="multiple" size="5" style="" width="150px">
    		
    		</select>
    	</td>
      </tr>
    </tbody></table>
    </form>
    </body>
    
    </html>
    btw, you should always use document.getElementById or document.getElementsByName if you are getting a tag,
    -ALL
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2005
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice, all you changed was the getElementById and that fixed it?


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
  •