Simple document.write from one list box to another [Archive]

Click to See Complete Forum and Search --> : Simple document.write from one list box to another

Evie

09-29-2003, 04:39 PM

Hi!

I know a lot about backend variable usage, but not much about the DOM.

I tried to do a search, but 'document.write' +code didn't do much for me.

This is what I want:

When a user doubleclicks/clicks a button, how do I get it to write to the other box on the page?

Here is the code I have so far:

function JSetDependencies(){
var nucid=document.frmAssignDependencies.lstGeneric.options[document.frmAssignDependencies.lstGeneric.selectedIndex].value;
var nucname=document.frmAssignDependencies.lstGeneric.options[document.frmAssignDependencies.lstGeneric.selectedIndex].name;
alert('In' +nucid);
var listwrite='<option name="optAdd'+nucid+'" value="'+nucid+ '">'+nucname+'</option>';
alert(listwrite);
lstDependencies.document.write(listwrite);
}

(it would also be great if you could tell me how to do it on a mulitple selection)

I have no idea how to get the 'thing' from lstGeneric to lstGeneric

Also, if you guys know a great reference on this kind of stuff, that would be awesome!

Thanks in advance, Evie.

Fang

09-30-2003, 01:17 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Copy selection from one box to another</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[

//]]>
</script>
</head>
<body>
<form id="myform" action="#" onsubmit="Insertion(this); return false;">
<select name="select1" multiple="multiple">
<option value="a">apple</option>
<option value="b">banana</option>
<option value="c">cranberry</option>
</select>
<select name="select2">
</select>
<button type="submit">Insertion</button>
</form>
</body>
</html>

document.write would never work correctly in your example.

Evie

09-30-2003, 08:01 AM

crap. It never occurred to me that you might put it on a submit.

Here is the form and it's elements that I'm trying to do:
<form name="frmAssignDependencies" method="post" target="hiddenWindowDependencies">

<table>
<tr>
<td rowspan="3">
<select name="lstGeneric" ondblclick="JSetDependencies()" size="15" multiple>
<:in "NucQuery.GetGenericList()">
<option name="opt<:var entry>" value="<:var entry>" name="<:var "_.string.strip(name)">"><:var "_.string.strip(name)"> v.<:var "_.string.strip(revision)"> (r. <:var revnum>)</option>
</:in>
</select>
</td>
<td align="center">
<input type="button" name="cmdAdd" value=" Add >> " onclick="JSetDependencies()">
</td>
<td rowspan="3">
<select name="lstDependencies" ondblclick="JRemoveDependencies()" size="15" multiple>

</select>
</td>
</tr>
<tr>
<td align="center">
<input type="button" name="cmdOptional" value=" Optional > " onclick="JOptional()">
</td>
</tr>
<tr>
<td align="center">
<input type="button" name="cmdRemove" value="<< Remove" onclick="JRemoveDependencies()">
</td>
</tr>
</form>

I tried modifying your code to make it do on a click/doubleclick and it wouldn't work at all.... :(

(Oh and the <:var is a dtml thing from Zope. They use <dtml-var, but we've hacked the Python so we only have to put the colon in...)
Originally posted by Fang
document.write would never work correctly in your example.

Fang

09-30-2003, 09:41 AM

This will deal with the onclick and ondblclick:
function JSetDependencies() {
var f=document.frmAssignDependencies;
//get # options in 2nd box
var S2len=f.lstDependencies.length;
//find selected in 1st box
for(i=0; i<f.lstGeneric.length; i++) {
if(f.lstGeneric[i].selected) {
//insert selected item in 2nd box & update index
f.lstDependencies.options[S2len++]=new Option(f.lstGeneric[i].text, f.lstGeneric[i].value);
}
}
}
function JRemoveDependencies() {
var f=document.frmAssignDependencies;
//find selected in 2nd box
for(i=0; i<f.lstDependencies.length; i++) {
if(f.lstDependencies[i].selected) {
//remove selected item from 2nd box
f.lstDependencies.options[i]=null;
}
}
}

Evie

09-30-2003, 05:30 PM

woot! Thanks babe, you are THE BOMB!

Evie

10-07-2003, 05:30 PM

If you know of a good source for this stuff, please let me know!

This is what I have now:

function JSetDependencies() {
var f=document.frmAssignDependencies;
//get # options in 2nd box
var S2len=f.lstDependencies.length;
//find selected in 1st box
for(i=0; i<f.lstGeneric.length; i++) {
if(f.lstGeneric[i].selected) {
//insert selected item in 2nd box & update index
f.lstDependencies.options[S2len++]=new Option(f.lstGeneric[i].text, f.lstGeneric[i].value);
f.lstGeneric.options[i]=null;
}
}
}

function JRemoveDependencies(){
var f=document.frmAssignDependencies;
//get # options in 2nd box
var S2len=f.lstGeneric.length;
//find selected in 2nd box
for(i=0; i<f.lstDependencies.length; i++) {
if(f.lstDependencies[i].selected) {
//insert selected item in 2nd box & update index
f.lstGeneric.options[S2len++]=new Option(f.lstDependencies[i].text, f.lstDependencies[i].value);
//remove selected item from 2nd box
f.lstDependencies.options[i]=null;
}
}
}

I need the new options to be selected, all of them, so that when the form is submitted, the objects get passed to the next page.

Unless you know of a way to grab that information.

TIA!

Fang

10-08-2003, 01:35 AM

Add the green text to this function:
function JSetDependencies() {
var f=document.frmAssignDependencies;
//get # options in 2nd box
var S2len=f.lstDependencies.length;
//find selected in 1st box
for(i=0; i<f.lstGeneric.length; i++) {
if(f.lstGeneric[i].selected) {
//insert selected item in 2nd box & update index
f.lstDependencies.options[S2len++]=new Option(f.lstGeneric[i].text, f.lstGeneric[i].value, true, true);
}
}
}

All the basic stuff is here (http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/option.html)

Evie

10-08-2003, 06:14 AM

Ohmygoodness, thank you!

:)

(WHY does it have to be something so easy EACH TIME? LOL)

-E