Menu
I have following document. How can I set limit to user to select only 10 items
through javascript ?
<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
function makeStringFromSelect(selectCtrl) {
var i;
var j = 0;
var outlist = “”;
for (i = 0; i < selectCtrl.options.length; i++) {
if (j > 0) {
outlist = outlist + “, “;
}
outlist = outlist + selectCtrl.options[i].value;
j++;
}
return outlist;
}
var arSelected = new Array();
function getMultiple(ob)
{
while (ob.selectedIndex != -1)
{
if (ob.selectedIndex != 0) arSelected.push(ob.options[ob.selectedIndex].value);
ob.options[ob.selectedIndex].selected = false;
}
// You can use the arSelected array for further processing.
}
function addItems(fromCtrl, toCtrl) {
var i;
var j;
var itemexists;
var nextitem;
// step through all items in fromCtrl
for (i = 0; i < fromCtrl.options.length; i++) {
if (fromCtrl.options[i].selected) {
// search toCtrl to see if duplicate
j = 0;
itemexists = false;
while ((j < toCtrl.options.length) && (!(itemexists))) {
if (toCtrl.options[j].value == fromCtrl.options[i].value) {
itemexists = true;
alert(fromCtrl.options[i].value + ” found!”);
}
j++;
}
if (!(itemexists)) {
// add the item
nextitem = toCtrl.options.length;
toCtrl.options[nextitem] = new Option(fromCtrl.options[i].text);
toCtrl.options[nextitem].value = fromCtrl.options[i].value;
}
}
}
}
function removeItems(fromCtrl) {
var i = 0;
var j;
var k = 0;
while (i < (fromCtrl.options.length – k)) {
if (fromCtrl.options[i].selected) {
// remove the item
for (j = i; j < (fromCtrl.options.length – 1); j++) {
fromCtrl.options[j].text = fromCtrl.options[j+1].text;
fromCtrl.options[j].value = fromCtrl.options[j+1].value;
fromCtrl.options[j].selected = fromCtrl.options[j+1].selected;
}
k++;
} else {
i++;
}
}
for (i = 0; i < k; i++) {
fromCtrl.options[fromCtrl.options.length – 1] = null;
}
}
//–>
</SCRIPT>
</HEAD>
<!–DATABASE DSN=hma–>
<CENTER>
<BODY BGCOLOR=”#FFFFFFF” TEXT=”#666666″ LINK=”#CC6600″ ALINK=”#CC6600″
VLINK=”#CC6600″ topMARGIN=”0″ LEFTMARGIN=”0″ MARGINWIDTH=”0″
MARGINHEIGHT=”0″>
<!– NOTE SQL SELECT COUNTYNAME,STCNTY from FIPS_Codes –>
<!–SQL SELECT * from FIPS_Codes –>
<FONT FACE=”Arial, Verdana, Comic Sans MS, Sans-serif” SIZE=”4″
COLOR=”PURPLE”>
<FORM METHOD=”post” ACTION=”URL_Generator.odb” name=”main”>
<INPUT TYPE=”HIDDEN” NAME=”Avail”>
<INPUT TYPE=”HIDDEN” NAME=”Sel”>
<CENTER>
<P> <CENTER><FONT FACE=”Arial, Verdana, Comic Sans MS, Sans-serif” SIZE=”3″
COLOR=”blue”>
<b>Please select no more that 10 counties.</b></font>
</center>
<TABLE align=”center” SIZE=”85″ BORDER=”25″ CELLPADDING=”10″ CELLSPACING=”4″ BGCOLOR=”ORANGE” bordercolorright=”gray”
BORDERCOLORDARK=”gray” bordercolor=”gray”>
<TR>
<TD VALIGN=”TOP” align=”center” valign=”middle” bgcolor=”silver”>
<FONT FACE=”Arial, Helvetica, sans-serif” size=”3″ COLOR=”PURPLE”>
<CENTER><B>Available Counties: </B></FONT></CENTER>
</FONT>
<B> </B><BR>
<SELECT MULTIPLE NAME=”AvailItems” SIZE=”5″ WIDTH=”25″>
<!–eachrow–>
<option value=”$STCNTY$”><FONT COLOR=#FF8000″ SIZE=”3″ FACE=”ARIAL”><B>
$COUNTYNAME$ County of $statename$</B> <!–endrow–>
</select>
</TD>
<BR>
<TD ALIGN=”CENTER”>
<BR>
<INPUT TYPE=”BUTTON” NAME=”AddBtn” VALUE=” ADD ” OnClick=”addItems(this.form.AvailItems, this.form.SelItems); removeItems(this.form.AvailItems);”> <BR>
<BR>
<INPUT TYPE=”BUTTON” NAME=”RemoveBtn” VALUE=” REMOVE ” OnClick=”addItems(this.form.SelItems, this.form.AvailItems); removeItems(this.form.SelItems);”> <BR>
</TD>
<BR>
<TD VALIGN=”TOP” align=”center” valign=”middle” bgcolor=”silver”>
<B><FONT FACE=”Arial, Helvetica, sans-serif” size=”3″ COLOR=”PURPLE”>
Selected Counties:</FONT></B><BR><BR>
<SELECT multiple=”multiple” NAME=”SelItems” SIZE=”5″ WIDTH=”25″
onblur=’getMultiple(document.main.selItems);’ >
<!–eachrow–>
<option value=”$STCNTY$”><B>$COUNTYNAME$ County –(“$STCNTY$”)</B>
<!–endrow–>
</select>
</TD>
</TR>
</TABLE>
<BR><BR>
<INPUT TYPE=”BUTTON” VALUE=”Submit” OnClick=”this.form.Avail.value = makeStringFromSelect(this.form.AvailItems); this.form.Sel.value = makeStringFromSelect(this.form.SelItems); this.form.submit();”;
“return confirm(“You have selected: ” + arSelected.toString();”>
</FORM>
</BODY>
</HTML>