In a previous message, someone asked about creating an add/remove script between two list boxes (select menus). There was an excellent solution to the problem posted by iqof188, however the solution left off a way to retrieve the modified data from the resulting select box. The link to the original article is here:
This type of layout is frequently used to select from a list of fields in the first box, including the ordering of those fields in the resulting second select menu. The problem lies in the fact that only those fields that are physically selected will be returned to the form handler CGI. The work around is to write another JavaScript routine that will select all of the fields in the result select menu before the data is passed to the form. This is the solution to that problem:
A quick search of Google does not return any info on how to do this, so I thought I would post this solution back to the forum to help others that may have been bitten by this issue. Best,
Dave
This type of layout is frequently used to select from a list of fields in the first box, including the ordering of those fields in the resulting second select menu. The problem lies in the fact that only those fields that are physically selected will be returned to the form handler CGI. The work around is to write another JavaScript routine that will select all of the fields in the result select menu before the data is passed to the form. This is the solution to that problem:
Code:
<html>
<head>
<script language="JavaScript">
function deleteOption(object,index) {
object.options[index] = null;
}
function addOption(object,text,value) {
var defaultSelected = true;
var selected = true;
var optionName = new Option(text, value, defaultSelected, selected)
object.options[object.length] = optionName;
}
function copySelected(fromObject,toObject) {
for (var i=0, l=fromObject.options.length;i<l;i++) {
if (fromObject.options[i].selected)
addOption(toObject,fromObject.options[i].text,fromObject.options[i].value);
}
for (var i=fromObject.options.length-1;i>-1;i--) {
if (fromObject.options[i].selected)
deleteOption(fromObject,i);
}
}
function selectAll(object) {
for (var i=0, len=object.options.length;i<len;i++) {
object[i].selected = "1"
}
}
</script>
</head>
<body style="font-size: 10px; font-family: verdana;">
<form action="/cgi-bin/showdata.pl" method="post">
<table>
<tr>
<td align="left" width="35%">
<select name="select1" size="8" multiple>
<option>Item 1
<option>Item 2
<option>Item 3
<option>Item 4
</select>
</td>
<td align="center" width="30%" style="vertical-align: middle;">
<input type="button" value="<" onClick="if (document.images) copySelected(this.form.select2,this.form.select1)"><br/>
<input type="button" value=">" onClick="if (document.images) copySelected(this.form.select1,this.form.select2)">
</td>
<td align="left" width="35%">
<select name="select2" size="8" multiple>
<option>Item 5
<option>Item 6
<option>Item 7
<option>Item 8
</select>
</td>
</tr>
</table>
<input type="submit" value="Done" onClick="selectAll(this.form.select2)">
</form>
</body>
</html>A quick search of Google does not return any info on how to do this, so I thought I would post this solution back to the forum to help others that may have been bitten by this issue. Best,
Dave