PDA

View Full Version : Selectboxes populating div or table



Evindesign
Sep 17th, 2007, 11:13 AM
Hey guys,

I have a problem regarding a form..

If you take a look at the link provided you see an example of ceratain selected values beeing passed between two selectboxes..

http://javascript.internet.com/forms/form-swapper-2.html/

Well my problem is that I want the values to appear on a div or table to right instead of the selectbox there...

Then I also need a delete link next to each selection that appears there and finally the values need to be sent to another php page..

Thanx

vwphillips
Sep 17th, 2007, 04:26 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#FakeSel {
position:relative;overflow:auto;width:100px;height:100px;border:solid black 1px;
}


/*]]>*/
</style>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcMoveOption(zxcrsid,zxcfsid,zxcmde){
var zxcrs=document.getElementById(zxcrsid);
var zxcfs=document.getElementById(zxcfsid);
if (zxcmde==0&&zxcfs.lst) zxcfs.removeChild(zxcfs.lst);
if (zxcmde==2&&zxcfs.lst){
zxcrs.appendChild(zxcfs.lst.sel);
zxcfs.removeChild(zxcfs.lst);
var zxcary=[];
for (var zxc0=0;zxc0<zxcrs.options.length;zxc0++) zxcary.push(zxcrs.options[zxc0]);
zxcary=zxcary.sort(zxcSortOptions);
for (var zxc1=0;zxc1<zxcary.length;zxc1++) zxcrs.appendChild(zxcary[zxc1]);
zxcrs.selectedIndex=-1;
}
zxcfs.lst=null;
if (zxcmde==1&&zxcrs.selectedIndex>=0){
var zxcmove=zxcrs.removeChild(zxcrs.options[zxcrs.selectedIndex]);
var zxcdiv=zxcES('DIV',{position:'relative',height:'20px',backgroundColor:'#ffffff',cursor:(document.all )?'hand':'pointer'},zxcfs,zxcmove.text);
zxcdiv.sel=zxcmove;
zxcdiv.onmouseover=function(){ zxcES(this,{backgroundColor:'#3399CC'}); }
zxcdiv.onmouseout=function(){ zxcES(this,{backgroundColor:(this.parentNode.lst==this)?'#3399CC':'#ffffff'}); }
zxcdiv.onclick=function(){
var zxcp=this.parentNode;
if (zxcp.lst) zxcES(zxcp.lst,{backgroundColor:'#ffffff'});
zxcp.lst=this;
}
var zxcary=[];
for (var zxc0=0;zxc0<zxcfs.childNodes.length;zxc0++) zxcary.push(zxcfs.childNodes[zxc0]);
zxcary=zxcary.sort(zxcSortDivs);
for (var zxc1=0;zxc1<zxcary.length;zxc1++) zxcfs.appendChild(zxcary[zxc1]);
}
var zxcclds=zxcfs.childNodes;
zxcfs.links='';
for (var zxc1=0;zxc1<zxcclds.length;zxc1++) zxcfs.links+=zxcclds[zxc1].firstChild.data+':';
alert(zxcfs.links); // Demo Only
}


function zxcSortOptions(zxca,zxcb){
var zxcaa=zxca.text;
var zxcbb=zxcb.text;
if (zxcaa<zxcbb) return -1;
if (zxcaa>zxcbb) return 1;
return 0;
}

function zxcSortDivs(zxca,zxcb){
var zxcaa=zxca.firstChild.data;
var zxcbb=zxcb.firstChild.data;
if (zxcaa<zxcbb) return -1;
if (zxcaa>zxcbb) return 1;
return 0;
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

/*]]>*/
</script>
</head>

<body>
<select id="RealSel" size=3>
<option value="" >Tom</option>
<option value="" >Dick</option>
<option value="" >Harry</option>
</select>
<input type="button" name="" value=">>" onclick="zxcMoveOption('RealSel','FakeSel',1);"/>
<input type="button" name="" value="<<" onclick="zxcMoveOption('RealSel','FakeSel',2);" />
<input type="button" name="" value="Delete" onclick="zxcMoveOption('RealSel','FakeSel',0);" />
<div id="FakeSel" >
</div>

</body>

</html>

Evindesign
Sep 17th, 2007, 06:17 PM
thanx man works great...

But is it possible to pass on selected variables with a submit button also?

thx again

vwphillips
Sep 17th, 2007, 08:33 PM
suggest you use a hidden input(type text) to record zxcfs.links and decode in the php page

Evindesign
Sep 18th, 2007, 10:10 AM
I tried to use:


<input type="hidden" id="FakeSel2" name="valda" />

And put a <form action="reg.php" method="post" name="formular"> tag around the select

then I made the move button like this


<input type="button" name="" value=">>" onclick="zxcMoveOption('RealSel','FakeSel',1);zxcMoveOption('RealSel','FakeSel2',1);"/>

and finally:

<input type="submit" value="send" />

But it doesn´t record selections.. What am I doing wrong? And will this send multiple variables or just one?

Maybe it sends one and I can use php explode in the recieving file?

Sorry I am new to this...

Thx