Move Form Data Select

[Total: 0    Average: 0/5]

This example shows how to have two columns of data moved back and forth.

Head Code:

<STYLE>
.inputF {
	width=170;
	height=150;
	background-color:#FAFB99
}
.inputF2 {
	width=170;
	background-color:#FAFB99
}
.listCell{
	background-color:#FCFE52;
	layer-background-color: #FCFE52;
}
	
.selCell {
	background-color:#7073FE;
	border-style:inset;
	border-width:1px;
	border-left-color:white;
	border-top-color:white;
	border-bottom-color:black;
	border-right-color:black;
}
H6 {
	COLOR: white; FONT-FAMILY: Arial,  helvetica CE, helvetica; FONT-SIZE: 8pt; FONT-STYLE: normal; FONT-WEIGHT: normal
}
TABLE {
	COLOR: black;
	FONT-FAMILY: Arial,  helvetica CE, helvetica;
	FONT-SIZE: 9pt;
	FONT-STYLE: normal;
	FONT-WEIGHT: normal;
	display: block;
}
SELECT {
	COLOR: black; FONT-FAMILY: Arial,  helvetica CE, helvetica; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-WEIGHT: normal;
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function moveVals(n, from, to) {
	if (document.layers) {
		fromObj = document.layers[from];
		to = document.layers[to];
	} else if (document.all) {
		fromObj = document.all(from);
		to = document.all(to);
	}
	if (n == 1 || n == 2) {
		var indTo = to.length-1;
		for (i=fromObj.length-1; i>=0; i--) {
			if (n==1 || fromObj.options[i].selected) {
				indTo++;
				to.options[indTo] = new Option(fromObj.options[i].text, fromObj.options[i].value);
				fromObj.options[i] = null;
			}
		}
	} else if (n == 3 || n == 4) {
		var indFrom = fromObj.length-1;
		for (i=to.length-1; i>=0; i--) {
			if (n==4 || to.options[i].selected) {
				indFrom++;
				fromObj.options[indFrom] = new Option(to.options[i].text, to.options[i].value);
				to.options[i] = null;
			}
		}
	}
}

function frmButtons() {
	var select = "chosen";
	var avail = "avail";
	if (document.layers) {
		var sel = document.layers[select];
		var av = document.layers[avail];
	} else if (document.all) {
		var sel = document.all(select);
		var av = document.all(avail);
	}
	if (sel.length <= 0) {
		document.frmAddPro.btnR.disabled = true;
		document.frmAddPro.btnRR.disabled = true;
	} else {
		document.frmAddPro.btnR.disabled = false;
		document.frmAddPro.btnRR.disabled = false;
	}
	if (av.length <= 0) {
		document.frmAddPro.btnL.disabled = true;
		document.frmAddPro.btnLL.disabled = true;
	} else {
		document.frmAddPro.btnL.disabled = false;
		document.frmAddPro.btnLL.disabled = false;
	}
}

function deleteFrom() {
	for (i=0; i<document.frmAddPro.elements.length-1; i++) {
		if  (document.frmAddPro.elements[i].tagName.indexOf("SELECT") && document.frmAddPro.elements[i].id.indexOf("av")) {
			alert("Cislo: "+i+" Name: "+document.frmAddPro.elements[i].tagName);
		}
	}
}
-->
</SCRIPT>

Body Code:

<CENTER>
		<FORM NAME="frmAddPro">
		<TABLE>
		<TBODY>
			<TR>
				<TD WIDTH=170 CLASS="selCell">
				Available towns:
				</TD>
				<TD>
				</TD>
				<TD WIDTH=170 CLASS="selCell">
				Your favorite:
				</TD>
			</TR>
			<TR>
				<TD>
				<SELECT MULTIPLE CLASS="inputF" NAME="avail" ID="av">
				<OPTION>Berlin
				<OPTION>London
				<OPTION>Luxemborg
				<OPTION>New York
				<OPTION>Paris
				<OPTION>Prague
				<OPTION>Tokyo
				</SELECT>
				</TD>
				<TD ALIGN=CENTER VALIGN=CENTER>
				<INPUT TYPE="button" VALUE=">>" STYLE="{width=25;}" NAME="btnLL" onClick="javascript: moveVals(1, 'avail', 'chosen'); frmButtons(); return false;"><BR>
				<INPUT TYPE="button" VALUE=">" STYLE="{width=25;}" NAME="btnL" onClick="javascript: moveVals(2, 'avail', 'chosen'); frmButtons(); return false;"><BR>
				<INPUT TYPE="button" VALUE="<" STYLE="{width=25;}" NAME="btnR" onClick="javascript: moveVals(3, 'avail', 'chosen'); frmButtons(); return false;"><BR>
				<INPUT TYPE="button" VALUE="<<" STYLE="{width=25;}" NAME="btnRR" onClick="javascript: moveVals(4, 'avail', 'chosen'); frmButtons(); return false;">
				</TD>
				<TD>
				<SELECT MULTIPLE CLASS="inputF" NAME="chosen">
				</SELECT>
				</TD>
			</TR>
		</TBODY>
		</TABLE>
		</FORM>
	</CENTER>
<a href="http://www.cleverlance.com"><h6>Copyright by Cleverlance 2001<h6></a>
<BR>
<i>Special permission was granted to JS-X to present this script here</i>
<script>
frmButtons();
</script>

Times Viewed: 2

Leave a Reply

Your email address will not be published. Required fields are marked *