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>