Select Box & JavaScript Functions Question

[ThatVBGuy]

Hello All,

I have a multi-select list box, In this box is a list of names. I want to call a javascript onClick that will keep a running total of how many people were clicked. As soon as a user tries to click the 41st item (only 40 allowed) I want to alert the user, they cannot select more then 40 participants in this box.

Here is what i have so far:

<script>
function KeepTotal(){
   var i;
   i = i + 1;
   if (i > 40)
   {
      alert('You can only select 40 names');
   }
}
</script>
<select name="participants" onClick="javascript:KeepTotal();" multiple>
   <option value="1">Name 1</option>
   <option value="2">Name 2</option>
   ... (about 150 names in total populated from a db)
</select>
 

can someone please explain to me where im going wrong and how to get this working. Im not looking to have it done for me without an explanation. I would love to understand this as im sure I will need to write more functions like this in the future.

thanks,
John

[iam_clint]

<script>
var i = 0;
function KeepTotal(){
   i += 1;
   if (i > 40)
   {
      alert('You can only select 40 names');
   }
}
</script>
<select name="participants" onClick="javascript:KeepTotal();" multiple>
   <option value="1">Name 1</option>
   <option value="2">Name 2</option>
   ... (about 150 names in total populated from a db)
</select>
 

as you can see i moved var i outside the function (declares it as global so it keeps its value) then i set it to 0 var i = 0; because your adding numbers, i changed it from i = i + 1 to i += 1 which is just cleaner looking and there you have it my friend.

[pbmods]

<script>
var i = 0;
function KeepTotal(){
   ++i;
   if (i > 40) {
      alert('You can only select 40 names');
         return false;
   }
   return true;
}
</script>
<select name="participants" onClick="return KeepTotal();" multiple>
   <option value="1">Name 1</option>
   <option value="2">Name 2</option>
   ... (about 150 names in total populated from a db)
</select>
 

Made a couple of extra changes:

• ++i because I can :)
• KeepTotal returns true if OK to keep clicking, false if not.
• the select's onclick s/b return KeepTotal to prevent the select from registering the click if the User has exceeded his quota.
• onclick="javascript: is redundant.

[iam_clint]

nice catches your good! :P

keep up the good work pbmods

[ThatVBGuy]

thats guys that worked like a champ there are still a few bugs i have noticed though.

1. if you happen to go over 40 names you get the alert but then if you de-select the 41st name you get the alert again and every time thereafter wether selecting or de-selecting.

2. is it possible when a user clicks the 40st name after the alert box to deselect the name they just selected as the 41st and subtract it from the counter so it will not keep displaying the message?

thanks allot for the help and the explanations.

-John

[iam_clint]

 
<script>
var i = 0;
function KeepTotal(obj){
   var opts = obj.options;
   var b = 0;
   for (i=0; i<opts.length; i++)   {
          if (opts[i].selected == true) { b++; }
          if (b>40) { opts[i].selected = false; }
   }
  if (b>40) { alert("some options have been deselected! you may not have over 40 selected."); return false; }
else { return true; }
 
}
</script>
<select name="participants" onClick="return KeepTotal(this);" multiple>