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!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

option transfer list boxes 2

Status
Not open for further replies.
Ngai88

Ngai88

Programmer
Sep 8, 2004
56
US
Hello,
I have 2 lists :

Personnel:
==========
test1
test2
Janet
Brown
Small

People:
==========
james
Wolter
McDonald

I have no problem transfering items from Personnel listBox to People listbox, but I do not seem to be able to transfer items from People list back to Personnel list.
It is so difficult to debug. I am wondering if any expert out there can help me out ? where did I screw up? or is there simplier way to make these 2 list boxes transfer items back and forth without the coding comlexity.

thanks in advance,
Ngai


===========================================
The following is my code...
===========================================
function copyToList(from,to)

{
var person = document.forms["Schedule"].person;
var personnel = document.forms["Schedule"].personnel;

fromList = eval('document.forms["Schedule"].' + from);
toList = eval('document.forms["Schedule"].' + to);

if (toList.options.length > 0 && toList.options[personnel.selectedIndex].value == 'temp')

{

toList.options.length = 0;
}

var sel = false;
for (i=0;i<fromList.options.length;i++)
{
var current = fromList.options;
if (current.selected)
{
sel = true;
if (current.value == 'temp')
{
alert ('You cannot move this text!');
return;
}
txt = current.text;


val = current.value;
toList.options[toList.length] = new Option(txt,val);
fromList.options = null;
i--;
}
}
if (!sel) alert ('You haven\'t selected any options!');
}


function allSelect()
{
List = document.forms["Schedule"].chosen;
if (List.length && List.options[personnel.selectedIndex].value == 'temp') return;
for (i=0;i<List.length;i++)
{
List.options.selected = true;
}
}
 
Sort by date Sort by votes
Do you mean a page like this?
Code: 
<html>
<head>
<title>Moving items</title>
<script type="text/javascript">
<!--

function moveItem(srcname, targname)
{
  var src = document.forms[0].elements[srcname];
  if (src.selectedIndex == -1)
    return;
  var targ = src.form.elements[targname];
  var opt = src.options[src.selectedIndex];
  targ.options[targ.options.length] = opt;
}

// -->
</script>
</head>
<body>
 <form>
  <select name="one" size="6" style="width: 100px;">
   <option>A</option>
   <option>B</option>
   <option>C</option>
  </select>
  <input type="button" value="--&gt;" onclick="moveItem('one','two');">
  <input type="button" value="&lt;--" onclick="moveItem('two','one');">
  <select name="two" size="6" style="width: 100px;">
   <option>D</option>
   <option>E</option>
   <option>F</option>
  </select>
 </form>
</body>
</html>

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.
 
Upvote 0 Downvote
Hello all,

That's a very nice piece of demo of principle, Chessbot. As such, it works great in NN7, but unfortunately fails in IE6. (I have other browsers handy.) I've modified the function moveItem to make it works both in NN7 and IE6.
Code: 
function moveItem(srcname, targname)
{
	var src = document.forms[0].elements[srcname];
	if (src.selectedIndex == -1)
		return;
	var targ = src.form.elements[targname];
	var opt = src.options[src.selectedIndex];
	targ.options[targ.options.length] = new Option(opt.innerHTML);
	src.options[src.selectedIndex]=null;
}
regards - tsuji
 
Upvote 0 Downvote
I meant "I have [red]not[/red] other browsers handy".
- tsuji
 
Upvote 0 Downvote
Further notes:

When I look back at the originator's script, I think some constructions I use are already present there. But, I have not yet taken careful look at it, maybe later.

- tsuji
 
Upvote 0 Downvote
Thank you chessbot and Thankyou tsuji, both of you are life saver.It is working beautifully now..(o:


Thanks again,
Ngai
 
Upvote 0 Downvote
I thought that you had to switch it over and the I made a test page and tested it in Firefox... Guess I should remember to test it in IE too!

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.
 
Upvote 0 Downvote
chessbot or tsuji,
Now that the transfer options is working, I have to make it so that the items transfered need to be finalized, I have to add a 'submit' button & function to make the transfered items stick, how and where to add it?

thanks,
Ngai
 
Upvote 0 Downvote
Just add a submit button to the form.

What do you mean by making the transfered items "stick"? Do you mean save the boxes in a database? You could create a hidden field for each option holding the name of the select that it is in.

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.
 
Upvote 0 Downvote
Ngai88,

This little expansion might illustrate many further aspects of the interaction.
Code: 
<html>
<head>
<title>Moving items</title>
<script type="text/javascript">
<!--
function moveItem(srcname, targname){
	var src = document.forms[0].elements[srcname];
	if (src.selectedIndex == -1)
		return;
	var targ = src.form.elements[targname];
	var opt = src.options[src.selectedIndex];
	targ.options[targ.options.length] = new Option(opt.innerHTML);
	src.options[src.selectedIndex]=null;
	_update();
}

function hidden_update(s) {	//s be "one" or "two" by design, should be relaxed by careful re-design
	var separator="|";
	var oelem=document.forms["formtest"].elements["options_"+s];
	var osrcelem=document.forms["formtest"].elements[s];
	oelem.value="";
	for (var i=0; i<osrcelem.length;i++) {
	    if (i==osrcelem.length-1) {
			oelem.value+=osrcelem.options[i].innerText;
		} else {
			oelem.value+=osrcelem.options[i].innerText + separator;
		}
	}	
	return;
}

function _update() {
	hidden_update("one");
	hidden_update("two");
}

window.onload=_update;
// -->
</script>
</head>
<body>
	<form action="[blue]test_action.asp[/blue]" method="post" name="formtest">
	<select name="one" size="6" style="width: 100px;">
		<option value="a">A</option>
		<option value="b">B</option>
		<option value="c">C</option>
	</select>
	<input type="button" value="--&gt;" onclick="moveItem('one','two');">
	<input type="button" value="&lt;--" onclick="moveItem('two','one');">
	<select name="two" size="6" style="width: 100px;">
		<option value="d">D</option>
		<option value="e">E</option>
		<option value="f">F</option>
	</select>
	<p><input type="hidden" name="options_one" /></p>
	<p><input type="hidden" name="options_two" /></p>
	<p><input type="submit" name="tosubmit" value="submit" /></p>
	</form>
</body>
</html>
(I added some values to the options to illustrate interplay of innerText and value when captured at the server when there are values explicitly defined and when not.)

The asp page test_action.asp can be as simple as this.
Code: 
<%
response.write request.form("options_one") & "<br />"
response.write request.form("options_two") & "<br />"
'must highlight/select to get through, the capture is innerText if value not explicitly set
'if value is explicitly set, it is the value attribute which rules, else the innerText is taken
response.write request.form("one") & "<br />"
response.write request.form("two") & "<br />"
%>
- tsuji
 
Upvote 0 Downvote
hi tsuji,

Could you please give an html example code instead of test_action.asp

Thanks
19decsat
 
Upvote 0 Downvote
Hello 19decsat,

Repetitive can turn silly. But, it is still of some good illustrative character here. This is how to simulate similar action in pure html. I just adding this, taking out that by pieces along the writing up, so the result may not be as concise as wish.
Code: 
<html>
<head>
<title>Moving items</title>
<script type="text/javascript">
<!--
function moveItem(srcname, targname) {
	var src = document.forms[0].elements[srcname];
	if (src.selectedIndex == -1)
		return;
	var targ = src.form.elements[targname];
	var opt = src.options[src.selectedIndex];
	targ.options[targ.options.length] = new Option(opt.innerHTML);
	src.options[src.selectedIndex]=null;
	_update();	//hardcoded, can relax by redesign
}

function hidden_update(s) {	//s be "one" or "two" by design
	var separator="|";
	var oelem=document.forms["formtest"].elements["options_"+s];
	var osrcelem=document.forms["formtest"].elements[s];
	oelem.value="";
	for (var i=0; i<osrcelem.length;i++) {
		if (i==osrcelem.length-1) {
			oelem.value+=osrcelem.options[i].innerText;
		} else {
			oelem.value+=osrcelem.options[i].innerText + separator;
		}
	}	
	return;
}

function _update() {
	hidden_update("one");
	hidden_update("two");
}

window.onload=_update;

function _action() {
	window.open ("[blue]htm_action.htm[/blue]");
	window.close();	//security alert unavoidable in this config
	return false;
}

// -->
</script>
</head>
<body>
	<form action="" method="post" name="formtest" [blue]onsubmit="_action()"[/blue]>
	<select name="one" size="6" style="width: 100px;">
		<option value="a">A</option>
		<option value="b">B</option>
		<option value="c">C</option>
	</select>
	<input type="button" value="--&gt;" onclick="moveItem('one','two');">
	<input type="button" value="&lt;--" onclick="moveItem('two','one');">
	<select name="two" size="6" style="width: 100px;">
		<option value="d">D</option>
		<option value="e">E</option>
		<option >F</option>
	</select>
	<p><input type="hidden" name="options_one" /></p>
	<p><input type="hidden" name="options_two" /></p>
	<p><input type="submit" name="tosubmit" value="submit" /></p>
	</form>
</body>
</html>
(Alert on closing parent windows is due to security model and is unavoidable as this configuration.)

The html "action" page is htm_action.htm located in the same directory. Its script is something like this.
Code: 
<html>
<head>
<script type="text/javascript">
function _buildit() {
	document.write (window.opener.document.forms["formtest"].elements["options_one"].value + "<br />");
	document.write (window.opener.document.forms["formtest"].elements["options_two"].value + "<br />");
	var elem1=window.opener.document.forms["formtest"].elements["one"];
	var elem2=window.opener.document.forms["formtest"].elements["two"];
	document.write (elem1[elem1.selectedIndex].value + "<br />");
	document.write (elem2[elem2.selectedIndex].value + "<br />");
}
window.onload=_buildit;
</script>
</head>
<body>
</body>
</html>
This is about the similar action as conceived in the previous asp action I can think of.

regards - tsuji
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
688
TheLazyPig
TheLazyPig
JPSeo
  • Locked
  • Question
simple SyntaxError: missing ) after argument list error
Replies
2
Views
348
JPSeo
JPSeo
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
322
feherke
feherke
waubain
  • Locked
  • Question
Syntax help to create values list for table column
Replies
1
Views
263
waubain
waubain
dvannoy
  • Locked
  • Question
Check drop down list value 1
Replies
1
Views
262
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top