PHP and Javascript 2

jsnull · Jan 29, 2015

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

vacunita · Jan 29, 2015

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:

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

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,[COLOR=#CC0000]getListById())[/color]" value="->"><br />
<input type="button" onClick="move(this.form.ToLB[],[COLOR=#CC0000]getListById())[/color]" value="<-">
</td>
<td>
Selections Made<br>
<select multiple size="10" name="ToLB[]" [COLOR=#CC0000]id="ToLB"[/color] 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

jsnull · Jan 29, 2015

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.

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

vacunita · Jan 29, 2015

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

jpadie · Jan 29, 2015

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.

vacunita · Jan 29, 2015

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

jsnull · Jan 29, 2015

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

Jim Null

jpadie · Jan 29, 2015

try something like this:

http://jsfiddle.net/vrzux0Ld/

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

jpadie · Jan 30, 2015

and for those that prefer a native javascript implementation try this:

http://jsfiddle.net/mx50vLq8/3/

jpadie · Jan 30, 2015

oops. wrong version number.

http://jsfiddle.net/mx50vLq8/6/

jsnull · Jan 30, 2015

jpadie that's awesome! I copied their code boxes onto

http://www.chenetwork.org/test.html

and, when clicking one of the bullets it doesn't move. There must be something missing in it.

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

jpadie · Jan 30, 2015

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>

jpadie · Jan 31, 2015

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>

vacunita · Feb 3, 2015

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

vacunita · Feb 3, 2015

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

jpadie · Feb 3, 2015

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.

jsnull · Feb 3, 2015

jpadie - very nice on our last post. I have it here at

http://www.chenetwork.org/test2.php

... now how would I transform this to post to grab it via php?

Jim Null

jsnull · Feb 3, 2015

vacunita - I put your code here

http://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

jpadie · Feb 4, 2015

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-[URL unfurl="true"]www-form-urlencoded">[/URL]
<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.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

PHP and Javascript 2

IS-IT--Management

Programmer

IS-IT--Management

Programmer

Technical User

Programmer

IS-IT--Management

Technical User

Technical User

Technical User

IS-IT--Management

Technical User

Technical User

Programmer

Programmer

Technical User

IS-IT--Management

IS-IT--Management

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor