Trying to limit number of items passed from one select box to another…almost got it

I think I’m on the right track here, but something’s still not right. Trying to limit number of items that can be passed to the ‘list1’ select box to ten items. The way I have it thus far, it pops up a warning if user tries to pass more than ten, but then passes the first ten of the selected items through to list1. I don’t want it to pass any items if they try to pass more than ten…just want it to show the popup, and make them try again.

Anyone know what to change in my code to make that happen? Thanks!

<SCRIPT LANGUAGE=”JavaScript” type=”text/javascript”>
var MAX_ITEMS = 10;

function showWarning()
{
alert (“No more than ” + MAX_ITEMS + ” columns allowed.”);
}

function selectUnselectMatchingOptions(obj,regex,which,only) {
if (window.RegExp) {
if (which == “select”) {
var selected1=true;
var selected2=false;
}
else if (which == “unselect”) {
var selected1=false;
var selected2=true;
}
else {
return;
}
var re = new RegExp(regex);
for (var i=0; i<obj.options.length; i++) {
if (re.test(obj.options[i].text)) {
obj.options[i].selected = selected1;
}
else {
if (only == true) {
obj.options[i].selected = selected2;
}
}
}
}
}

function sortSelect(obj) {
var o = new Array();
if (obj.options==null) { return; }
for (var i=0; i<obj.options.length; i++) {
o[o.length] = new Option( obj.options[i].text, obj.options[i].value, obj.options[i].defaultSelected, obj.options[i].selected) ;
}
if (o.length==0) { return; }
o = o.sort(
function(a,b) {
if ((a.text+””) < (b.text+””)) { return -1; }
if ((a.text+””) > (b.text+””)) { return 1; }
return 0;
}
);

for (var i=0; i<o.length; i++) {
obj.options[i] = new Option(o[i].text, o[i].value, o[i].defaultSelected, o[i].selected);
}
}

function selectAllOptions(obj) {
for (var i=0; i<obj.options.length; i++) {
obj.options[i].selected = true;
}
}

function moveSelectedOptions(from,to) {
i=0; bOK= true;
while( bOK && i < from.length )
{ if (from[i].selected)
{ if (to.length >= MAX_ITEMS) bOK = false;
else to.appendChild( from[i] );
}
else i++;
}
if (!bOK)
showWarning();
return false;

// Unselect matching options, if required
if (arguments.length>3) {
var regex = arguments[3];
if (regex != “”) {
unSelectMatchingOptions(from,regex);
}
}
// Move them over
for (var i=0; i<from.options.length; i++) {
var o = from.options[i];
if (o.selected) {
to.options[to.options.length] = new Option( o.text, o.value, false, false);
}
}
// Delete them from original
for (var i=(from.options.length-1); i>=0; i–) {
var o = from.options[i];
if (o.selected) {
from.options[i] = null;
}
}
if ((arguments.length<3) || (arguments[2]==true)) {
sortSelect(from);
sortSelect(to);
}
from.selectedIndex = -1;
to.selectedIndex = -1;
}

function moveAllOptions(from,to) {
i=0; bOK = true;
while( bOK && i < from.length )
{ if (to.length >= MAX_ITEMS) bOK = false;
else to.appendChild( from[i] );
}
if (!bOK)
showWarning();
return false;

selectAllOptions(from);
if (arguments.length==2) {
moveSelectedOptions(from,to);
}
else if (arguments.length==3) {
moveSelectedOptions(from,to,arguments[2]);
}
else if (arguments.length==4) {
moveSelectedOptions(from,to,arguments[2],arguments[3]);
}
}

</SCRIPT>

<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td class=”xsmall” width=”20%”>
<b>Fields To Display</b><br>
<SELECT NAME=”list1″ MULTIPLE SIZE=10 onDblClick=”moveSelectedOptions(this.form[‘list1’],this.form[‘list2’],true)”>

</SELECT>
</td>
<td valign=”middle” width=”15%” align=”center”>
<INPUT TYPE=”button” NAME=”right” VALUE=”&gt;&gt;” ONCLICK=”moveSelectedOptions(this.form[‘list1’],this.form[‘list2’],true)”><BR><BR>
<INPUT TYPE=”button” NAME=”right” VALUE=”All &gt;&gt;” ONCLICK=”moveAllOptions(this.form[‘list1’],this.form[‘list2’],true)”><BR><BR>
<INPUT TYPE=”button” NAME=”left” VALUE=”&lt;&lt;” ONCLICK=”moveSelectedOptions(this.form[‘list2’],this.form[‘list1’],true)”><BR><BR>
<INPUT TYPE=”button” NAME=”left” VALUE=”All &lt;&lt;” ONCLICK=”moveAllOptions(this.form[‘list2’],this.form[‘list1’],true)”>
</td>
<td class=”xsmall” width=”65%”>
<b>Available Fields</b><br>
<SELECT NAME=”list2″ MULTIPLE SIZE=10 onDblClick=”moveSelectedOptions(this.form[‘list2’],this.form[‘list1’],true)”>
<cfoutput query=”get_fields”>
<option value=”#field_name#”>#field_desc#</option>
</cfoutput>
</SELECT>
</td>

</tr>
</table>

Also in #JavaScript _↴