You are here: irt.org | FAQ | JavaScript | Form | Q1265 [ previous next ]
Try something like:
<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 copyAll(fromObject,toObject) {
for (var i=0, l=fromObject.options.length;i<l;i++) {
addOption(toObject,fromObject.options[i].text,fromObject.options[i].value);
}
for (var i=fromObject.options.length-1;i>-1;i--) {
deleteOption(fromObject,i);
}
}
function populateHidden(fromObject,toObject) {
var output = '';
for (var i=0, l=fromObject.options.length;i<l;i++) {
output += escape(fromObject.name) + '=' + escape(fromObject.options[i].value) + '&';
}
alert(output);
toObject.value = output;
}
//--></script>
<form name="myForm" onSubmit="populateHidden(document.myForm.select2,document.myForm.hidden1)">
<table><tr><td>
<p>
<select name="select1" multiple size="7">
<option value="0">zero
<option value="1">one
<option value="2">two
<option value="3">three
<option value="4">four
<option value="5">five
<option value="6">six
</select>
</p>
</td><td>
<p>
<input type="button" value=" > " onClick="if (document.images) copySelected(this.form.select1,this.form.select2)">
</p>
<p>
<input type="button" value=" < " onClick="if (document.images) copySelected(this.form.select2,this.form.select1)">
</p>
<p>
<input type="button" value=">>" onClick="if (document.images) copyAll(this.form.select1,this.form.select2)">
</p>
<p>
<input type="button" value="<<" onClick="if (document.images) copyAll(this.form.select2,this.form.select1)">
</p>
</td><td>
<select name="select2" multiple size="7">
</select>
</td></tr></table>
<input type="submit" value="Submit">
<input type="hidden" name="hidden1">
</form>