×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Jobs

PHP and Javascript
2

PHP and Javascript

PHP and Javascript

(OP)
I have 2 select boxes, with Javascript, that moves a selection from one to another. The one moved to is a multiple select box. To get all of the items in the box via PHP after submission I have named it "ToLB[]" .. with brackets for php array form submission. However, when I add the brackets, the Javascript will not move selections into it. And that's with adding the brackets to the appropriate places in Javascript. Help my friend!

CODE -->

<?php

print "<p>display post values</p>";
foreach($_REQUEST as $postname => $postvalue){
	print "<strong>$postname: </strong>$postvalue<br>";
    //$name is the name of the field, $value is the value.

}

?>
<html>    
<head>
<script language="javascript"> 
function move(tbFrom, tbTo) 
{
 var arrFrom = new Array(); var arrTo = new Array(); 
 var arrLU = new Array();
 var i;
 for (i = 0; i < tbTo.options.length; i++) 
 {
  arrLU[tbTo.options[i].text] = tbTo.options[i].value;
  arrTo[i] = tbTo.options[i].text;
 }
 var fLength = 0;
 var tLength = arrTo.length;
 for(i = 0; i < tbFrom.options.length; i++) 
 {
  arrLU[tbFrom.options[i].text] = tbFrom.options[i].value;
  if (tbFrom.options[i].selected && tbFrom.options[i].value != "") 
  {
   arrTo[tLength] = tbFrom.options[i].text;
   tLength++;
  }
  else 
  {
   arrFrom[fLength] = tbFrom.options[i].text;
   fLength++;
  }
}

tbFrom.length = 0;
tbTo.length = 0;
var ii;

for(ii = 0; ii < arrFrom.length; ii++) 
{
  var no = new Option();
  no.value = arrLU[arrFrom[ii]];
  no.text = arrFrom[ii];
  tbFrom[ii] = no;
}

for(ii = 0; ii < arrTo.length; ii++) 
{
 var no = new Option();
 no.value = arrLU[arrTo[ii]];
 no.text = arrTo[ii];
 tbTo[ii] = no;
}
}


</script>
</head>

<body>
<hr />  
<form name="combo_box" action="test.php" method="post">
<table><tr><td>
Select From<br>
<select multiple size="10" name="FromLB" style="width:150">
         <option value="Afghanistan">Afghanistan</option>
          <option value="Albania">Albania</option>
          <option value="Algeria">Algeria</option>
          <option value="American Samoa">American Samoa</option>
          <option value="Andorra">Andorra</option>
          <option value="Angola">Angola</option>
          <option value="Anguilla">Anguilla</option>
          <option value="Antarctica">Antarctica</option>
          <option value="Antigua and Barbuda">Antigua and Barbuda</option>
  
        </select>
</select>
</td>
<td align="center" valign="middle">
<input type="button" onClick="move(this.form.FromLB,this.form.ToLB[]);" value="->"><br />
<input type="button" onClick="move(this.form.ToLB[],this.form.FromLB);" value="<-">
</td>
<td>
Selections Made<br>
<select multiple size="10" name="ToLB[]" style="width:150">
</select>
</td></tr></table>

<input type="submit" name="submit" value="submit" onmouseover="FillText()">

</form>
<hr />
</body>
</html> 

Jim Null

RE: PHP and Javascript

Unfortunately Javascript does not take well to square brackets in element names. So while you need them for PHP to turn the list into an array, JS simply cannot address an element by name that has square brackets in its name.

to get around this you can either step through the elements collection of the form object or simply address the list by Id rather than name. Personally, I think the latter is the easiest choice.
In your JS:

CODE --> JS

function getListById()
{
var thelist = document.getElementById('ToLB');
return thelist;
}

In your HTML:

CODE

<form name="combo_box" action="test.php" method="post">
<table><tr><td>
Select From<br>
<select multiple size="10" name="FromLB" style="width:150">
         <option value="Afghanistan">Afghanistan</option>
          <option value="Albania">Albania</option>
          <option value="Algeria">Algeria</option>
          <option value="American Samoa">American Samoa</option>
          <option value="Andorra">Andorra</option>
          <option value="Angola">Angola</option>
          <option value="Anguilla">Anguilla</option>
          <option value="Antarctica">Antarctica</option>
          <option value="Antigua and Barbuda">Antigua and Barbuda</option>
  
        </select>
</select>
</td>
<td align="center" valign="middle">
<input type="button" onClick="move(this.form.FromLB,getListById())" value="->"><br />
<input type="button" onClick="move(this.form.ToLB[],getListById())" value="<-">
</td>
<td>
Selections Made<br>
<select multiple size="10" name="ToLB[]" id="ToLB" style="width:150">
</select>
</td></tr></table> 

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: PHP and Javascript

(OP)
That's beautiful - absolutely love it!

When selecting countries and posting, though, PHP returns nothing. See: http://www.chenetwork.org/test.php I am using this php code to check what is posted.

CODE --> PHP

$listvals=$_POST['ToLB'];
   $n=count($listvals);
   if ($n == 1){$country = $listvals[0];}
   elseif($n < 1){
   		print "You did not select a country.<br>";
		$badinfo = "yes";
   }
   else{
	   for($i=0;$i<$n;$i++) {
		   $country .= $listvals[$i]. "<br>";
	   }
   }
if ($n > 1){   
	$country = substr($country, 0, -1);
} 

Jim Null

RE: PHP and Javascript

Are you selecting the countries on the ToLB dropdown?

Remember only selected options get sent over.
Just because they get moved to the other list does not make them selected.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: PHP and Javascript

exactly, Phil. I'd recommend not using select boxes. use two <ul>s and have a hidden text box taking comma delimited values from the list items.

RE: PHP and Javascript

I would as well. Though that would require the extra code to convert the selected options to say a comma separated string and place it in the value of a hidden element.

jQuery has frameworks for this to make it easy. Though I usually deploy my own pre-made ones.

Alternatively,You can also select the options as you create them in the target dropdown via the "selected" property.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: PHP and Javascript

(OP)
Ok .. using the uls intrigues me .. how would I do that?

Jim Null

RE: PHP and Javascript

try something like this: http://jsfiddle.net/vrzux0Ld/

this requires jquery but you can easily refactor it to use native javascript.

RE: PHP and Javascript

(OP)
jpadie that's awesome! I copied their code boxes onto www.chenetwork.org/test.html and, when clicking one of the bullets it doesn't move. There must be something missing in it.

CODE --> html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
}
#pick { margin: 1rem; padding: 1rem; border: thin black solid;}
#picked { margin: 1rem; padding: 1rem; border: thin blue solid; width: auto;}
#resultsDiv{ margin: 1rem; padding: 1rem; border: thin red solid; width: auto;}
#resultsDiv input{width:100%;}

</style>
<script type="text/javascript">
var doLists = function(){
    var v = {
        pick: document.querySelector('#pick ul'),
        picked:document.querySelector('#picked ul'),
        results: document.querySelector('#results'),
        resultsButton: document.querySelector('#button')
    };
    
    var e = {
        listClick: function(e){
            if(e.target.nodeName != 'LI') return;
            e.stopPropagation();
            var el = e.target.parentElement.parentElement;
            var t,s;
            if(el.id == 'pick'){
                t = v.picked; s = v.pick;
            }
            t.appendChild(e.target.cloneNode(true));
            s.removeChild(e.target);
            m.updateValues();
        },
        buttonClick: function(e){
            e.preventDefault();
            m.updateValues();
        },
        load:function(){
            m._addEvent('click',v.resultsButton, e.buttonClick);
            m._addEvent('click', v.pick, e.listClick);
            m._addEvent('click', v.picked, e.listClick);
        },
    };
    
    var m = {
        _addEvent: function(event, el, callback){
            if (el.addEventListener) {
                el.addEventListener(event, callback);
            } else {
                el.attachEvent(event, callback);
            }
        },
        updateValues: function(){
            var arr = [];
            [].forEach.call( v.picked.querySelectorAll('li'), function(el){
                arr.push(el.dataset.id);
            });
            v.results.value = arr.join(',');
        },
        init: function(){
            m._addEvent('load',window,e.load);
        }
    };
    m.init();
}
doLists();
</script>

</head>

<body>
<div>
    click an item in a list to move it from one to the other
</div>
<div id="pick">
<ul>
    <li data-id="apples">apples</li>
    <li data-id="oranges">oranges</li>
    <li data-id="bananas">bananas</li>
</ul>
</div>
<div id="picked">
<ul>
</ul>
</div>
<div>
    <button id="button">Click Me</button><br/>
    <div id="resultsDiv">
        Hidden text field: <br/>
        <input id="results" name="results" /></div>
</div>        
</body>
</html> 

Jim Null

RE: PHP and Javascript

wrong version I think. there was an issue with where you put the code in that version. it needed to be after the dom had loaded.

this should work better

CODE

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#pick { padding: 1rem; border: thin black solid;}
#picked { padding: 1rem; border: thin blue solid; width: auto;}
#resultsDiv{ margin: 1rem; padding: 1rem; border: thin red solid; width: 24rem;}
#resultsDiv input[type="text"]{width:100%;}

/* some simple list styling */
div{clear:left;}
#pick, #picked{width: 10rem; float:left; clear:none;margin-top:2rem; margin-bottom: 1rem;}
#pick{margin-right: 2rem;margin-left: 1rem;}
ul{list-style:none; padding:0; margin:0;}
li{padding: 0.3rem; margin: 0.2rem; background-color:#D0D0D0;outline:thin solid blue;}
li:nth-child(even){background-color:#909090; color: white;}


</style>
<script type="text/javascript">
var doLists = function(){
    var v = {
		pick: '#pick ul',
        picked:'#picked ul',
        results: '#results',
        resultsButton: '#button',
        auto: '#auto' 
	};
    
	var $ = function(selector){ return document.querySelector(selector);}
	
    var e = {
        listClick: function(e){
            if(e.target.nodeName != 'LI') return;
            e.stopPropagation();
            var el = e.target.parentElement.parentElement;
            var t,s;
            if(el.id == 'pick'){
                t = $(v.picked); s = $(v.pick);
            } else {
                t = $(v.pick); s=$(v.picked);
            }
            t.appendChild(e.target.cloneNode(true));
            s.removeChild(e.target);
            if(v.auto.checked == true){
                m.updateValues();
            }
        },
        buttonClick: function(e){
            e.preventDefault();
            m.updateValues();
        },
                    
        load:function(){
			m._addEvent('click', $(v.resultsButton), e.buttonClick);
            m._addEvent('click', $(v.pick).parentNode, e.listClick);
            m._addEvent('click', $(v.picked).parentNode, e.listClick);
        },
    };
    
    var m = {
        _addEvent: function(event, el, callback){
			console.log(el);
            if (el.addEventListener) {
                el.addEventListener(event, callback);
            } else {
                el.attachEvent(event, callback);
            }
        },
        updateValues: function(){
            var arr = [];
            [].forEach.call( v.picked.querySelectorAll('li'), function(el){
                arr.push(el.dataset.id);
            });
            v.results.value = arr.join(',');
        },
        init: function(){
            m._addEvent('load',window,e.load);
        }
    };
    m.init();
}
doLists();
</script>

</head>

<body>
<div>
    click an item in a list to move it from one to the other
</div>
<div id="pick">
<ul>
    <li data-id="apples">apples</li>
    <li data-id="oranges">oranges</li>
    <li data-id="bananas">bananas</li>
</ul>
</div>
<div id="picked">
<ul>
</ul>
</div>
<div id="resultsDiv">
    <input type="checkbox" id="auto" value="1" /> Auto-Update<br/>
    <button id="button">Click Me</button><br/>
    Hidden text field: <br/>
    <input id="results" name="results" type="text" />
</div>   
</body>
</html> 

RE: PHP and Javascript

I was bored this morning so transformed the above code into a plugin. you feed it a select box and it transforms it into a two column pick list.

sample styles are provided.

set debug = true in the constructor to see the original select box get its options selected and unselected.

the select box will submit normally with any container form. if it is not named with square brackets then only the first value will get submitted.

or you can use the getValue option to return the selected values in csv.

It's pretty self explanatory but feel free to ask for clarification if you like.

CODE

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.pickListContainer{
	width: 25rem;
	clear:both;
	overflow-y: auto;
}
.pickListContainer ul{
	padding:0;
	margin:0;
	width: 10rem; 
	float:left; 
	clear:none;
	margin-top:2rem; 
	margin-bottom: 1rem;
	margin-right: 1rem;
	min-height: 2rem;
	height: 30 ex;
	list-style: none;
}
.pickListContainer ul:nth-child(even){
	border: thin black solid
}
.pickListContainer ul:nth-child(odd){
	border: thin blue solid
	
}
.pickListContainer li{
	padding: 0.3rem; 
	margin: 0.2rem; 
	background-color:#D0D0D0;
	outline:thin solid blue;
}
.pickListContainer li:nth-child(even){
	background-color:#909090; 
	color: white;
}


</style>
<script type="text/javascript">
HTMLSelectElement.prototype.pickList = function( option ){
    var defaults = {
		container:'',
		select: '',
		pick: '',
		picked:'',
		debug: false
	};
    
	var o = {
		get: function (option){
			return _this.options[option];
		},
		set: function (option, value){
			_this.options[option] = value;
		}
	};
	
	var u = {
		s4: function(){
			return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
		},
		guid: function(){
			return u.s4() + u.s4() + '-' + u.s4() + '-' + u.s4() + '-' + u.s4() + '-' + u.s4() + u.s4() + u.s4();
		}
	};
	
	var $ = function(selector, context){
		if(typeof context == 'undefined') context = document;
		var elems = context.querySelectorAll(selector);
		if (elems.length == 0) return [];
		return elems.length>1 ? elems : elems[0];
	};
	
	var $$ = function(elem){
		return document.createElement(elem);
	};
	
    var e = {
        listClick: function(e){
            if(e.target.nodeName != 'LI') return;
            e.stopPropagation();
			var t = (e.target.parentNode.id == o.get('pick').id) ? o.get('picked') : o.get('pick');
			/*move items*/
			if(t == o.get('picked')){
				var lis = $('li',o.get('picked'));
				var lastPos;
				if(typeof lis.length == 'undefined') {
					if (e.target.dataset.position > lis.dataset.position) {
						o.get('picked').appendChild(e.target.cloneNode(true));
					}
					else {
						o.get('picked').insertBefore(e.target.cloneNode(true), lis);
					}
				} else if(lis.length == 0){
					o.get('picked').appendChild(e.target.cloneNode(true));
				} else {
					for (var i = 0; i < lis.length; i++) {
						var pos = lis[i].dataset.position;
						if (pos < e.target.dataset.position) {
							lastPos = pos;
						}
						else {
							o.get('picked').insertBefore(e.target.cloneNode(true), lis[i]);
							break;
						}
						if (i == lis.length - 1) {
							o.get('picked').appendChild(e.target.cloneNode(true));
						}
					}
				}
				e.target.style.display = 'none'; /*hide rather than remove to keep order */
				/*set select box */
				var elems = $('option',o.get('select'));
				$('option',o.get('select'))[e.target.dataset.position].selected = true;
			} else {
				var s = 'data-position="' + e.target.dataset.position + '"';
				$('li['+ s + ']',o.get('pick')).style.display = 'block';
				e.target.parentNode.removeChild(e.target);
				$('option',o.get('select'))[e.target.dataset.position].selected=false;
			}
			
		},        
        load:function(){
			// create the internal structure 
			var div = $$('div');
			div.id = u.guid();
			div.classList.add('pickListContainer');
			o.set('container',div);
			
			var ul = $$('ul');
			ul.id = u.guid();
			o.set( 'pick', ul);
			for(var j=0; j<_this.options.length; j++){
				var li = $$('li');
				li.dataset.value = _this.options[j].value;
				li.dataset.position = j;
				li.appendChild(document.createTextNode(_this.options[j].text));
				ul.appendChild(li);
			}
			div.appendChild(ul);
			
			var ul = $$('ul');
			ul.id = u.guid();
			o.set('picked', ul);
			div.appendChild(ul);
		
			//hide select box
			if (o.get('debug') != true) {
				_this.style.position = "absolute";
				_this.style.left = "-1000px";
			}
			_this.setAttribute("multiple","multiple");
			for(var i=0; i<_this.options.length; i++){
				_this.options[i].selected = false;
			}
			//insert div
			_this.parentNode.insertBefore(div, _this);
			
			im._addEvent('click', div, e.listClick);
        },
    };
    
	var im = {
		_addEvent: function(event, el, callback){
			if (el.addEventListener) {
                el.addEventListener(event, callback);
            } else {
                el.attachEvent(event, callback);
            }
        }
	};
	
    var m = {
        init: function( options ){
			_this.options = defaults;
			for(var i in options) o.set(i,options[i]);
			o.set('pick','#' + this.id);
			e.load();
        },
		getValues:function(){
			var output = [];
			var lis = $('option', o.get('select'));
			for(var i=0;i<lis.length; i++){
				if(lis[i].selected){
					output.push(lis[i].value);
				}
			}
			return output.join(',');
		}
    };
    
	var _this = this;
	if(m[option]){
		return m[option].apply( this, Array.prototype.slice.call( arguments, 1 ));
	} else if ( typeof option === 'object' || ! option ) {
		return m.init.apply( this, arguments );
    } else {
		return false;
	}
}
document.addEventListener('DOMContentLoaded',function(){
	document.querySelector('#transform').addEventListener('click', function(e){
		e.preventDefault();
		document.querySelector('#myMultipleSelectBox').pickList({debug: false});
		var b = document.createElement('button');
		b.appendChild(document.createTextNode('Show Values'));
		b.addEventListener('click', function(e){
			e.preventDefault();
			alert('CSV = ' + document.querySelector('#myMultipleSelectBox').pickList('getValues'));
		});
		e.target.parentNode.appendChild(b);
		e.target.parentNode.removeChild(e.target);
		document.querySelector('div').style.display = 'block';
	});
});
</script>

</head>

<body >
<div style="display:none">
    click an item in a list to move it from one to the other
</div>
<select name="myMultipleSelectBox[]" id="myMultipleSelectBox">
	<option value="apples">apples</option>
    <option value="oranges">oranges</option>
    <option value="bananas">bananas</option>
</select>
<button id="transform">Transform</button>
</body>
</html> 

RE: PHP and Javascript

A little late to the party,

But I think this is a much more straight forward way of doing this:

CODE

<!DOCTYPE HTML>
<html>
	<head>
		<title>Transfer Lists</title>
		<style type="text/css">

		div.listtransfer
		{
			overflow:hidden;
			background-color:#f2f2f2;
			padding:1020pxpx;
		}

		div.listtransfer div.listdiv
		{
			border:2px groove rgba(240,240,240,0.4);
			float:left;
		}		 

		div.listtransfer div.buttons
		{
			float:left;
		}	
		div.listtransfer div.listdiv ul
		{
			border:1px inset rgba(240,240,240,0.4);
			min-height:100px;
			min-width:100px;
			max-width:250px;
			list-style-type: none;
			padding:0;
			margin-left:10px;
			background-color:#ffffff;
			margin:0;
			height:200px;
			overflow:scroll;
		}

		div.listtransfer div.listdiv ul li
		{
			line-height: 15px;
			color:#868686;
			font-family:sans-serif;
			cursor: pointer;
			padding:8px;
			font-size:12px;
			border-bottom:1px solid rgba(240,240,240,0.2);
		}

		input#selit
		{
			margin-left:10px;
			line-height:30px;
		}	
	</style>

	<script type="">
		var tfItems= new Array();

		Array.prototype.clean = function ()
		{
			var newArray = new Array();
			for(var i = 0; i<this.length; i++)
			{
				if (this[i])
				{
					newArray.push(this[i]);
				}
			}
			return newArray;
		}



		function moveItems(mvdir)
		{
			if(mvdir=='right')
			{	
				var fromList = document.getElementById('list1');
				var toList = document.getElementById('list2');
			}
			else 
			{
				var fromList = document.getElementById('list2');
				var toList = document.getElementById('list1');
			}
			var items = fromList.getElementsByTagName('LI'); 
	
			var tmplist = new Array;
			var removelist = new Array;
			for(var x=0;x<=items.length;x++)	
			{
				newLi = items[x];
				if(newLi && newLi.getAttribute('data_selected') == 'true')
				{
					tmplist[x] = items[x].cloneNode(true);
					removelist.push(items[x]);
					toList.appendChild(tmplist[x]); 
								
					var storeVals = newLi.getAttribute('data_val') + ":" + newLi.innerHTML;
				
					if(tfItems[newLi.getAttribute('data_pos')]!=null && tfItems[newLi.getAttribute('data_pos')]!=undefined)
					{
						tfItems[newLi.getAttribute('data_pos')] = null;
					}
					else 
					{
						tfItems[newLi.getAttribute('data_pos')] = storeVals;					
					}
					
				}
			}	
			for(var j=0; j<=removelist.length-1;j++)
			{
				fromList.removeChild(removelist[j]);	
			}

			document.getElementById('selit').value=tfItems.clean().toString();
		}

		function selectItem(itemObj)
		{
	
			if(itemObj.getAttribute('data_selected')=='true')
			{
				itemObj.style.backgroundColor="#ffffff";
				itemObj.style.color="#262626";
				itemObj.setAttribute('data_selected','false');
				return;
			}
			else 
			{
				itemObj.style.backgroundColor="#0066aa";
				itemObj.style.color="#f2f2f2";
				itemObj.setAttribute('data_selected','true');
			}
		}


	</script>
</head>
<body>

<form action="../files/echorequest.php" method="post">
<div class="listtransfer">
	<div class="listdiv listfrom">
		<ul id="list1">
			<li data_selected='false' data_val="opt1" onclick="return selectItem(this,list2)">Option 1</li>
			<li data_selected='false' data_val="opt2" onclick="return selectItem(this,list2)">Option 2</li>
			<li data_selected='false' data_val="opt3" onclick="return selectItem(this,list2)">Option 3</li>
			<li data_selected='false' data_val="opt4" onclick="return selectItem(this,list2)">Option 4</li>
			<li data_selected='false' data_val="opt5" onclick="return selectItem(this,list2)">Option 5</li>
		</ul>
	</div>
	<div class="buttons"><input type="button" value=">" onclick="moveItems('right')"><br><input type="button" value="<" onclick="moveItems('left')"></div>
	<div class=" listdiv listto">
		<ul id="list2">data_pos="5"
		</ul>
	</div>
	<input type="text" name="selectedItems" id="selit">	
</div>


<input type="submit" value="Send" name="gobtn">

</form>
</body>
</html> 

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: PHP and Javascript

Sorry, ignore that code:

CODE

<!DOCTYPE HTML>
<html>
	<head>
		<title>Transfer Lists</title>
		<style type="text/css">

		div.listtransfer
		{
			overflow:hidden;
			background-color:#f2f2f2;
			padding:1020pxpx;
		}

		div.listtransfer div.listdiv
		{
			border:2px groove rgba(240,240,240,0.4);
			float:left;
		}		 

		div.listtransfer div.buttons
		{
			float:left;
		}	
		div.listtransfer div.listdiv ul
		{
			border:1px inset rgba(240,240,240,0.4);
			min-height:100px;
			min-width:100px;
			max-width:250px;
			list-style-type: none;
			padding:0;
			margin-left:10px;
			background-color:#ffffff;
			margin:0;
			height:200px;
			overflow:scroll;
		}

		div.listtransfer div.listdiv ul li
		{
			line-height: 15px;
			color:#868686;
			font-family:sans-serif;
			cursor: pointer;
			padding:8px;
			font-size:12px;
			border-bottom:1px solid rgba(240,240,240,0.2);
		}

		input#selit
		{
			margin-left:10px;
			line-height:30px;
		}	
	</style>

	<script type="">
		var tfItems= new Array();

		Array.prototype.clean = function ()
		{
			var newArray = new Array();
			for(var i = 0; i<this.length; i++)
			{
				if (this[i])
				{
					newArray.push(this[i]);
				}
			}
			return newArray;
		}



		function moveItems(mvdir)
		{
			if(mvdir=='right')
			{	
				var fromList = document.getElementById('list1');
				var toList = document.getElementById('list2');
			}
			else 
			{
				var fromList = document.getElementById('list2');
				var toList = document.getElementById('list1');
			}
			var items = fromList.getElementsByTagName('LI'); 
	
			var tmplist = new Array;
			var removelist = new Array;
			for(var x=0;x<=items.length;x++)	
			{
				newLi = items[x];
				if(newLi && newLi.getAttribute('data_selected') == 'true')
				{
					tmplist[x] = items[x].cloneNode(true);
					removelist.push(items[x]);
					toList.appendChild(tmplist[x]); 
								
					var storeVals = newLi.getAttribute('data_val') + ":" + newLi.innerHTML;
				
					if(tfItems[newLi.getAttribute('data_pos')]!=null && tfItems[newLi.getAttribute('data_pos')]!=undefined)
					{
						tfItems[newLi.getAttribute('data_pos')] = null;
					}
					else 
					{
						tfItems[newLi.getAttribute('data_pos')] = storeVals;					
					}
					
				}
			}	
			for(var j=0; j<=removelist.length-1;j++)
			{
				fromList.removeChild(removelist[j]);	
			}

			document.getElementById('selit').value=tfItems.clean().toString();
		}

		function selectItem(itemObj)
		{
	
			if(itemObj.getAttribute('data_selected')=='true')
			{
				itemObj.style.backgroundColor="#ffffff";
				itemObj.style.color="#262626";
				itemObj.setAttribute('data_selected','false');
				return;
			}
			else 
			{
				itemObj.style.backgroundColor="#0066aa";
				itemObj.style.color="#f2f2f2";
				itemObj.setAttribute('data_selected','true');
			}
		}


	</script>
</head>
<body>

<form action="../files/echorequest.php" method="post">
<div class="listtransfer">
	<div class="listdiv listfrom">
		<ul id="list1">
			<li data_pos="1" data_selected='false' data_val="opt1" onclick="return selectItem(this,list2)">Option 1</li>
			<li data_pos="2" data_selected='false' data_val="opt2" onclick="return selectItem(this,list2)">Option 2</li>
			<li data_pos="3" data_selected='false' data_val="opt3" onclick="return selectItem(this,list2)">Option 3</li>
			<li data_pos="4" data_selected='false' data_val="opt4" onclick="return selectItem(this,list2)">Option 4</li>
			<li data_pos="5" data_selected='false' data_val="opt5" onclick="return selectItem(this,list2)">Option 5</li>
		</ul>
	</div>
	<div class="buttons"><input type="button" value=">" onclick="moveItems('right')"><br><input type="button" value="<" onclick="moveItems('left')"></div>
	<div class=" listdiv listto">
		<ul id="list2">
		</ul>
	</div>
	<input type="text" name="selectedItems" id="selit">	
</div>


<input type="submit" value="Send" name="gobtn">

</form>
</body>
</html> 

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: PHP and Javascript

Sure

The heavy lifting in my code is in the listclick method.

The rest is all an exemplar in when extending the Dom is ok rather than evil. And a bit of encapsulation. All dressed up like a jQuery plugin (in architecture) without jQuery. So hopefully a learning tool.

Also you will see that the last code transforms a preexisting select box but keeps it in the Dom so that it will submit with the form. So nondestructive of the markup and degrades nicely. And in doing so you can apply it to multiple select boxes without overlap.

RE: PHP and Javascript

(OP)
jpadie - very nice on our last post. I have it here at www.chenetwork.org/test2.php ... now how would I transform this to post to grab it via php?

Jim Null

RE: PHP and Javascript

(OP)
vacunita - I put your code here www.chenetwork.org/test1.php and I'm not getting anything when I submit the form and then loop through all the values?

Jim Null

RE: PHP and Javascript

the easiest way is to wrap the select in form tags, supply the relevant attributes and a submit button

CODE

<form action="pathToGrabit.php" action="post" enctype="application/x-www-form-urlencoded">
<select name="myMultipleSelectBox[]" id="myMultipleSelectBox" >
    <option value="apples">apples</option>
    <option value="oranges">oranges</option>
    <option value="bananas">bananas</option>
</select>
<div>
<input type="submit" name="xSubmit" value="Send to GrabIt"/>
</form> 

if you needed to do this in javascript then the class is easily extensible. you'd just need to decide at what point in the process you want the upload to occur. on move of each list item or manually on a click or whatever.

then when the plugin loaded you could suppress the input button and interrupt the submit event to perform the send over js. i can provide the code if you need.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close