I'm having a problem with a form that passes values from one select
box to the next. It works fine, except that the name of the receiving
box contains a period (so to work with mySQL) tablename.fieldname.
Javascript doesn't like this. How can I fix it?

thanks

So, this works:

<form name="combo_box">
<table><tr><td>
<select multiple size="10" name="list1" style="width:150">
<option>red</option>
<option>white</option>
<option>blue</option>
</select>
</td>
<td align="center" valign="middle">
<input type="button" onClick="move(this.form.frack,this.form.list1)" value="<<">
<input type="button" onClick="move(this.form.list1,this.form.frack)" value=">>">
</td>
<td>
<select multiple size="10" name="frack" style="width:150">
</select>
</td></tr></table>
</form>

But if instead of "Frack" the second select box has to be named
"tablename.fieldname" how do I get it to work? Please help!!!

I read somewhere that I could use this.form.elements['hey.you'] but
that doesn't work either

<form name="combo_box">
<table><tr><td>
<select multiple size="10" name="list1" style="width:150">
<option>red</option>
<option>white</option>
<option>blue</option>
</select>
</td>
<td align="center" valign="middle">
<input type="button"
onClick="move(this.form.list1,this.form.elements['hey.you'])"
value="<<">
<input type="button"
onClick="move(this.form.elements['hey.you'],this.form.list1)"
value=">>">
umh
</td>
<td>
<select multiple size="10" name="hey.you" style="width:150">
</select>
</td></tr></table>
</form>

Thanks in advance

Will


The following is the scrip in the header although I don't think that
it matters, the problem is that element name with a period!

<script LANGUAGE="JavaScript">
<!-- Original: Phil Webb (phil@philwebb.com) -->
<!-- Web Site: http://www.philwebb.com -->

<!-- Begin
function move(fbox, tbox) {
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var i;
for (i = 0; i < tbox.options.length; i++) {
arrLookup[tbox.options[i].text] = tbox.options[i].value;
arrTbox[i] = tbox.options[i].text;
}
var fLength = 0;
var tLength = arrTbox.length;
for(i = 0; i < fbox.options.length; i++) {
arrLookup[fbox.options[i].text] = fbox.options[i].value;
if (fbox.options[i].selected && fbox.options[i].value != "") {
arrTbox[tLength] = fbox.options[i].text;
tLength++;
}
else {
arrFbox[fLength] = fbox.options[i].text;
fLength++;
}
}
arrFbox.sort();
arrTbox.sort();
fbox.length = 0;
tbox.length = 0;
var c;
for(c = 0; c < arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrFbox[c]];
no.text = arrFbox[c];
fbox[c] = no;
}
for(c = 0; c < arrTbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrTbox[c]];
no.text = arrTbox[c];
tbox[c] = no;
}
}
// End -->
</script>

Dear rayhomme,

Referring to the hey.you element as this.form.elements['hey.you'] is
supposed to work according to the JavaScript specifications, but some
browser implementations, especially older ones, may not parse the code
correctly.

A method guaranteed to work in any reasonable browser is to refer to
form elements by number. Elements are numbered starting from 0. Each
select, input, and textarea counts as an element.

In your case, the form contains, in order: a select element (number
0); an input element (number 1); another input element (number 2); and
a final select element (number 3). Thus, list1 is element 0 of the
form, while hey.you is element 3. This means that you can replace the
lines

  <input type="button"
   onClick="move(this.form.elements['hey.you'],this.form.list1)" value="<<">
  <input type="button"
   onClick="move(this.form.list1,this.form.elements['hey.you'])" value=">>">

with

  <input type="button"
   onClick="move(this.form.elements[3],this.form.list1)" value="<<">
  <input type="button"
   onClick="move(this.form.list1,this.form.elements[3])" value=">>">

or even with the following.

  <input type="button"
   onClick="move(this.form.elements[3],this.form.elements[0])" value="<<">
  <input type="button"
   onClick="move(this.form.elements[0],this.form.elements[3])" value=">>">

This style of reference will work regardless of what you name the elements.

It has been a pleasure to address this question on your behalf. If you
have trouble implementing or testing this code change, please ask for
a Clarification Request before you rate my answer.

Regards,

leapinglizard

Hi

Are you trying to move the selected item in list1 to hey.you listbox?

thanks
bala

Yes, I'm trying to move the selected item from list1 to hey.you. The
mySQL front end I use (webdatapro) names the fields
tablename.fieldname. I've been banging my head against this for a
while.

thanks,

Will

Hi

Check out this code. its working fine.

thanks
bala

code:

<HTML>
<script language=javascript>
function MoveItem(listTo, listFrom)
{
	var newOption;
	var i = 0;
	alert(listFrom.options.length);

	for (; i<listFrom.options.length; i++)
	{
		if (listFrom.options[i].selected == true)
		{
		    newOption = new Option();
			newOption.value = listFrom.options[i].value;
			newOption.text = listFrom.options[i].text;
    		listTo[listTo.options.length] = newOption;
			
		}
	}	
}
</script>

<BODY>
<form name="form1">
<table><tr><td>
<select multiple size="10" name="list1" style="width:150">
<option>red</option>
<option>white</option>
<option>blue</option>
</select>
</td>
<td align="center" valign="middle">
<!--<input type="button"
onClick="move(this.form.list1,this.form.elements['hey.you'])"
value="<<">-->
<!--<input type="button"
onClick="move(this.form.elements['hey.you'],this.form.list1)"
value=">>">-->

<input type="button"
onClick="MoveItem(this.form.elements['hey.you'],this.form.list1)"
value=">>" id=button1 name=button1>

umh
</td>
<td>
<select multiple size="10" name="hey.you" style="width:150">
</select>
</td></tr></table>
</form>


</BODY>
</HTML>

Hi

Do you have any problem in that code?

Thanks
Bala

hi rayhomme

Try this one...
it Working fine

<HTML>
<script id=clientEventHandlersJS language=javascript>
<!--

function move_on(lst1, lst2)
{

	var arrlst1 = new Array();
	var arrlst2 = new Array();
	var arrLookup = new Array();
	var i;
	for (i = 0; i < lst2.options.length; i++) {
	arrLookup[lst2.options[i].text] = lst2.options[i].value;
	arrlst2[i] = lst2.options[i].text;
	}
	var fLength = 0;
	var tLength = arrlst2.length;
	for(i = 0; i < lst1.options.length; i++) {
	arrLookup[lst1.options[i].text] = lst1.options[i].value;
	if (lst1.options[i].selected && lst1.options[i].value != "") {
	arrlst2[tLength] = lst1.options[i].text;
	tLength++;
	}
	else {
	arrlst1[fLength] = lst1.options[i].text;
	fLength++;
	}
	}
	arrlst1.sort();
	arrlst2.sort();
	lst1.length = 0;
	lst2.length = 0;
	var c;
	for(c = 0; c < arrlst1.length; c++) {
	var no = new Option();
	no.value = arrLookup[arrlst1[c]];
	no.text = arrlst1[c];
	lst1[c] = no;
	}
	for(c = 0; c < arrlst2.length; c++) {
	var no = new Option();
	no.value = arrLookup[arrlst2[c]];
	no.text = arrlst2[c];
	lst2[c] = no;
	}


}
 
//-->
</script>
	<BODY>
		<form name="form1">
			<table>
				<tr>
					<td>
						<select multiple size="10" name="list1" style="WIDTH:150px">
							<option value="item1">item1</option>
							<option value="item2">item2</option>
							<option value="item3">item3</option>
							<option value="item4">item4</option>
						</select>
					</td>
					<td align="center" valign="middle">
						&nbsp; <input type="button" value=">>" id="button1"
name="button1" onclick="move_on(document.form1.list1,document.form1.list2)">&nbsp;&nbsp;&nbsp;
						<br>
						&nbsp;&nbsp; <input type="button" value="<<" id="button2"
name="button2"  onclick="move_on(document.form1.list2,document.form1.list1)">&nbsp;&nbsp;&nbsp;&nbsp;
					</td>
					<td width="150">
						<select multiple size="10" name="list2" style="WIDTH:150px">
						</select>
					</td>
				</tr>
			</table>
		</form>
	</BODY>
</HTML>

hi rayhomme

Try this one...
   it Working fine.. in both direction.
   A suggetion for you if possible please dont put "."  in the name of
select box it makes difficulty while aceessing its propeties and
value.
if now any problem then you can back to me

==========================  start Code =============================
<HTML>
<script id=clientEventHandlersJS language=javascript>
<!--

function move_on(lst1, lst2)
{

	var arrlst1 = new Array();
	var arrlst2 = new Array();
	var arrLookup = new Array();
	var i;
	for (i = 0; i < lst2.options.length; i++) {
	arrLookup[lst2.options[i].text] = lst2.options[i].value;
	arrlst2[i] = lst2.options[i].text;
	}
	var fLength = 0;
	var tLength = arrlst2.length;
	for(i = 0; i < lst1.options.length; i++) {
	arrLookup[lst1.options[i].text] = lst1.options[i].value;
	if (lst1.options[i].selected && lst1.options[i].value != "") {
	arrlst2[tLength] = lst1.options[i].text;
	tLength++;
	}
	else {
	arrlst1[fLength] = lst1.options[i].text;
	fLength++;
	}
	}
	arrlst1.sort();
	arrlst2.sort();
	lst1.length = 0;
	lst2.length = 0;
	var c;
	for(c = 0; c < arrlst1.length; c++) {
	var no = new Option();
	no.value = arrLookup[arrlst1[c]];
	no.text = arrlst1[c];
	lst1[c] = no;
	}
	for(c = 0; c < arrlst2.length; c++) {
	var no = new Option();
	no.value = arrLookup[arrlst2[c]];
	no.text = arrlst2[c];
	lst2[c] = no;
	}


}
 
//-->
</script>
	<BODY>
		<form name="form1">
			<table>
				<tr>
					<td>
						<select multiple size="10" name="list1" style="WIDTH:150px">
							<option value="item1">item1</option>
							<option value="item2">item2</option>
							<option value="item3">item3</option>
							<option value="item4">item4</option>
						</select>
					</td>
					<td align="center" valign="middle">
						&nbsp; <input type="button" value=">>" id="button1"
name="button1" onclick="move_on(document.form1.list1,document.form1.list2)">&nbsp;&nbsp;&nbsp;
						<br>
						&nbsp;&nbsp; <input type="button" value="<<" id="button2"
name="button2"  onclick="move_on(document.form1.list2,document.form1.list1)">&nbsp;&nbsp;&nbsp;&nbsp;
					</td>
					<td width="150">
						<select multiple size="10" name="list2" style="WIDTH:150px">
						</select>
					</td>
				</tr>
			</table>
		</form>
	</BODY>
</HTML>
==========================  end Code =============================

enjoy programming.....
Thanks,
From
~Rahul Vaja