Please help to limit number of selections in multiple select list box

[Paul]

Hi,

I'd like to limit the number of selections a user can make in a
multiple select listbox. I have a note on the interface to say that
only x no. of items should be selected and I check the number server
side but I'd like to implement some javascript to do the same on the
client side. Ideally I'd like the javascript to work in IE5+ and
Netscape6+.

Thanks,

Paul

 

[Michael Winter]

I'd like to limit the number of selections a user can make in a
multiple select listbox. I have a note on the interface to say that
only x no. of items should be selected and I check the number server
side but I'd like to implement some javascript to do the same on the
client side.

You'll need to provide some more information, namely, what should happen
when a user selects a extra option? Should the user simply be alerted?
Should some form of intelligent algorithm be applied to keep the number of
selections within the prescribed limits?

Ideally I'd like the javascript to work in IE5+ and Netscape6+.

Unless this is an Intranet application, I would hope you want it to work
on my browser (Opera) and every other one in use, too. Move beyond the
outdated 'two browser' world.

Mike

 

[kaeli]

Unless this is an Intranet application, I would hope you want it to work
on my browser (Opera) and every other one in use, too. Move beyond the
outdated 'two browser' world.

Don't forget Safari.
I hear it's getting very popular with Mac users...

I myself use Mozilla or Netscape 7, depending on which computer I'm on.

/glad I code for intranet apps these days

--
--
~kaeli~
A midget fortune teller who escapes from prison is a small
medium at large.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[Michael Winter]

Don't forget Safari.

I didn't.

"...every other one in use, too."

I hear it's getting very popular with Mac users...

Really? Wonder why...

I myself use Mozilla or Netscape 7, depending on which computer I'm on.

I personally can't stand the interface. There's something about it that
just seems ugly to me. Other than that, their fine applications.

Mike

 

[kaeli]

I didn't.

Oh, I know, I was referring to the OP.

Sorry.

I personally can't stand the interface. There's something about it that
just seems ugly to me. Other than that, their fine applications.

Oh, they ARE ugly.
I use themes, specifically a really pretty blue one called Sky Pilot
Classic.
I tried Opera a while back and tons of sites didn't work with it (it had
crappy CSS and DHTML support), but I loved the tabbed browsing and lack
of popups. So, I got into Mozilla and liked it a lot. I haven't tried
Opera again, but I think it's gotten way better since I last tried it,
around V5.
At work, only IE and NN are available. So, I use NN7 here.

--

 

[Michael Winter]

^^^^^
D'oh. That, of course, should have been "they're".

Oh, they ARE ugly.
I use themes, specifically a really pretty blue one called Sky Pilot
Classic.

Glad I'm not the only one with that opinion. I'll be giving Mozilla
another go once I re-install Linux. I didn't know you could skin it
(didn't keep it around long enough to find out).

I tried Opera a while back and tons of sites didn't work with it (it had
crappy CSS and DHTML support), but I loved the tabbed browsing and lack
of popups. So, I got into Mozilla and liked it a lot. I haven't tried
Opera again, but I think it's gotten way better since I last tried it,
around V5.

Opera's support for virtually everything is pretty good now. There are
some sites that break with it though, but that's more than likely the
short-sightedness of the web developer, not the browser[1].

There are some things that need improving, such as XHTML support (scripts
don't work in XHTML mode), but the list of items not implemented is quite
small[2]. Certainly, everything in common use has been supported. If you
want to take a look at the list, the address is
http://www.opera.com/docs/specs/

Mike


[1] I usually have problems with these same sites using IE 5.5, so draw
your own conclusions.
[2] OK, it's not exactly 'small', but the bits missing are rather
insignificant.

 

[kaeli]

Glad I'm not the only one with that opinion. I'll be giving Mozilla
another go once I re-install Linux. I didn't know you could skin it
(didn't keep it around long enough to find out).

Well, there's not a whole hell of a lot out there, but there's a decent
number over at the Mozilla site.

Note for any NN users reading this - I just got NN7. I tried to skin it
with the stuff from NN's site and got errors because all their links
still point to NN6 and NN7 won't use the themes from NN6. Go over to
Mozilla's theme site instead of Netscape's theme park and you won't have
that problem.
http://themes.mozdev.org/

Opera's support for virtually everything is pretty good now. There are
some sites that break with it though, but that's more than likely the
short-sightedness of the web developer, not the browser[1].

Good to know.
My main problem with it was a lack of .style support even though it
supported getElementById. Almost no one checks for .style - they assume
if a browser supports getElementById, it supports both. Also, there are
way too many sites that still use browser detection instead of object
detection, so they try to do IE-only things with Opera if I have it set
to spoof IE, but do nothing if I leave it as Opera.
Do you have that problem with the new version?

--

 

[Richard Cornford]

... (scripts don't work in XHTML mode), ...

<snip>

That isn't strictly true. Opera 7 doesn't recognise script elements but
it does recognise and execute intrinsic events. With a bit of work you
can get quite a lot of code into an event handling attribute string (I
think it is something like 64Kb).

Combining the code in the onclick attributes of 4 <input type="button">
elements (which I had to click in the correct order to properly
initialise the script) I was able to get one of my DOM scanning scripts
running on an XHTML page[1] in Opera 7, allowing me to verify that they
have implemented more of the HTML DOM in their XHTML DOM implementation
than Mozilla has.

Richard.

[1] A valid XHTML page served as application/xhtml+xml rather than
text/html (which results in a normal HTML DOM).

 

[Lasse Reichstein Nielsen]

{Opera support of stuff]

My main problem with it was a lack of .style support even though it
supported getElementById. Almost no one checks for .style - they assume
if a browser supports getElementById, it supports both.

What version of Opera was that? Or are you referring to Opera 6's limited
DHTML capability (can't change display property etc.)? Because I can see
style properties back to Opera 4 at least (document.body.style exists).

Opera 7's CSS 2 support is almost perfect (on the same level as
Mozilla's - only minor details are not absolutely correct).

Also, there are way too many sites that still use browser detection
instead of object detection, so they try to do IE-only things with
Opera if I have it set to spoof IE, but do nothing if I leave it as
Opera. Do you have that problem with the new version?

They are rare, and usually say something like "We only support IE v4
and Netscape v4 or better, click here to upgrade your browser" (which
I mentally translate to "I am a clueless moron, please kick me").
That is, they are easily identifiable.

/L

 

[Michael Winter]

Opera's support for virtually everything is pretty good now. There are
some sites that break with it though, but that's more than likely the
short-sightedness of the web developer, not the browser[1].

Good to know.
My main problem with it was a lack of .style support even though it
supported getElementById. Almost no one checks for .style - they assume
if a browser supports getElementById, it supports both. Also, there are
way too many sites that still use browser detection instead of object
detection, so they try to do IE-only things with Opera if I have it set
to spoof IE, but do nothing if I leave it as Opera.
Do you have that problem with the new version?

I never spoof as IE and I've only had two sites that flat-out refuse to
work:

1) Mr. Morgenstern's ISKEET site (posted to this group - now been fixed)
2) A site recommended by Netscape for DOM tutorials,
http://www.getelementbyid.com/ [1]

As for .style, Opera seems to support it quite nicely. Of course, if it
didn't, I'm not likely to notice but a few sites have performed dynamic
background colour changes on mouse movement, and the like.

Mike


[1] Obviously, if a site states, "Sorry, this site is optimized for
Internet Explorer 5 and Netscape 6!!!" and it is supposed to teach how to
script sites, it's not very good, and not worth my time. We'll see what
Netscape thinks of such a practice: I asked them to remove the site from
their list.

 

[Paul]

Hi Mike,

Thanks for the response. All I'm looking for is a simple alert when
the form is submitted.

Thanks,

Paul

 

[Padam Jain]

Don't forget Safari.
I hear it's getting very popular with Mac users...

I myself use Mozilla or Netscape 7, depending on which computer I'm on.

/glad I code for intranet apps these days

--

Hi
U can do it by calling a javascript function on client side also
u just use this javascript function. call "limitOptions" function
"onchange" event of the list box. like this
onChange="javascript:limitOptions(this,5)". here 5 is the max number
of selection u want to allow
all the best

function limitOptions(oSel, howmany)
{
var opt, i = 0, msg = '', thismany = howmany, toomany = new Array();
while (opt = oSel.options[i++])
{
if (opt.selected) --howmany;
{
if (howmany < 0)
{
toomany[toomany.length] = opt;
}
}
}
if (howmany < 0)
{
msg += 'The maximum number of selections allowed in this list is ' +
thismany + '.';
msg += '\n\nPlease observe this limit.\n\n';
alert(msg);
i = 0;
while (opt = toomany[i++]) opt.selected = false;
return false;
}
}


Padam

 

[kaeli]

As for .style, Opera seems to support it quite nicely. Of course, if it
didn't, I'm not likely to notice but a few sites have performed dynamic
background colour changes on mouse movement, and the like.

It didn't when I tried it. Maybe I need to check it out again...
I'm curious if my work apps would function in it now. heh

[1] Obviously, if a site states, "Sorry, this site is optimized for
Internet Explorer 5 and Netscape 6!!!" and it is supposed to teach how to
script sites, it's not very good, and not worth my time. We'll see what
Netscape thinks of such a practice: I asked them to remove the site from
their list.

Well, I get your point, but there are some things that just can't be
done in some browsers. I don't do those things for my internet stuff,
but I do for my intranet apps. So, to me, scripts that only work in IE5
+/NN7+ are just fine (and sometimes great) for some of my applications.
I know the banking site I use requires IE5+ to work well. I've used it
with Mozilla and it does fine, but I know it would crash the old Opera.
The thing is, most bank customers use IE and they want all this dynamic
stuff, so the bank tries to comply and they end up breaking the site for
other browsers.

In a perfect world, all the browsers would have a real standard that
they all supported so we didn't drive ourselves crazy trying to code for
them. I know we're getting there, but you can't ask that all sites still
support archaic browsers, like NN4 and Opera 5, when the majority of the
customers want the bells and whistles available in the newer browsers.
Sure, anyone can learn to not *crash* old browsers by using object
detection, but some things simply can't be done in them (one of my DB
apps at work can't be done in NN4 for example, as the browser crashed
repeatedly with the large amount of buffering that was required for
large queries).
/MHO only YMMV


--

 

[kaeli]

What version of Opera was that? Or are you referring to Opera 6's limited
DHTML capability (can't change display property etc.)? Because I can see
style properties back to Opera 4 at least (document.body.style exists).

The former, and it was O5.
A simple color change with .style failed in it.

Opera 7's CSS 2 support is almost perfect (on the same level as
Mozilla's - only minor details are not absolutely correct).

Neat. After the comments here, I think I need to look at it again.

They are rare, and usually say something like "We only support IE v4
and Netscape v4 or better, click here to upgrade your browser" (which
I mentally translate to "I am a clueless moron, please kick me").

ROFL!!!
I still see quite a few of those kinds of posts here, though, and even
still see it in a few tutorial sites (probably not updated in ages, but
how's a newbie to know that?).


--

 

[Michael Winter]

Thanks for the response. All I'm looking for is a simple alert when
the form is submitted.

This function will check that the given SELECT element contains fewer than
'maximum' selected options.

function checkLimits( list, maximum ) {
var options = list.options;
var size = options.length;
var numSelected = 0;

for( var i = 0; i < size; ++i ) {
if( options[ i ].selected ) ++numSelected;
}
if( numSelected > maximum ) {
alert( 'You have selected more than ' + maximum + ' options.\n' +
'Please deselect ' + ( numSelected - maximum ) + ' option(s) then
try again.' );
return false;
}
return true;
}

To call it directly from a form's onsubmit event, you could do:

<select ... onsubmit="return checkLimits(this.listName, 2)">

Mike

 

[Richard Cornford]

The former, and it was O5.
A simple color change with .style failed in it.

<snip>

Opera 5 did (does?) have a style object, it only had about 20 properties
(and those included the non-standard IE pixelTop/Left/Width/Height) so
there was never much you could do even when the browser allowed it. But
as I recall, for example, setting style.background to a color did change
the background color of elements while setting style.backgroundColor did
not.

Richard.

 

[Richard Cornford]

... , most bank customers use IE and they want all this dynamic
stuff, so the bank tries to comply and they end up breaking the
site for other browsers.

<snip>

Do the customers really want all this dynamic stuff? I would have
thought that from the customer's point of view a safe, secure, reliable
system that allowed them to transact the business that need to transact
as quickly and easily as possible is the requirement. And that is easily
done cross-browser (and without JavaScript).

The client-side dynamic stuff can be layered on top, as an optional
extra, as there is no need for it and probably little real demand. Who
goes to their back when they are looking for entertainment, or would
trust that bank with their money if they fond it upon arrival?

Richard.

 

[kaeli]

<snip>

Do the customers really want all this dynamic stuff?

I would assume so, since the notice when they upgraded stated so and
apologized for any inconvenience.
*shrugs*

I personally think the changes were great, but I use NN7 or Mozilla 1.4
or IE6, so I don't have too many problems with most sites. I suspect if
I was a Mac user with Safari, I might be a bit more disappointed (I'm
not sure how that browser stacks up). I do know they do a lot of
createElement type stuff that wouldn't work on old browsers and it
wouldn't work (at least nearly as well) without javascript.
I love it, though. I think the site is MUCH easier to navigate and more
pleasant to use now.

A small example from my own (intranet) experience - a form to ask for
help. The form is created on the fly, with elements created based on
previous choices. This saves my users a lot of typing and saves me
having to ask them narrowing-down questions in mail replies or having
the application submit to page after page depending on answers. I never
did get it to work nicely in NN4 (tried document.write to layers, but it
sure wasn't pretty). When we upgraded to NN6 here, I could do a lot more
with my stuff and my users unilaterally loved it all. Another small
example would be the ability to sort tables client-side. That was
something I couldn't do until now, either. It used to be done with
another request to the server. My users ADORE this addition.

--
--
~kaeli~
Those who get too big for their britches will be exposed in
the end.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[kaeli]

I never spoof as IE and I've only had two sites that flat-out refuse to
work:

[opera]

Here's another one.
The DHTML menu I use.
I have no idea what it doesn't like, but it obviously has something to
do with one of the changes I put in to make it work in NN7.0, since the
original works fine.

Is there a debugger for it, like "javascript:" in NN?


--
--
~kaeli~
Hey, if you got it flaunt it! If you don't stare at someone
who does. Just don't lick the TV screen, it leaves streaks.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[Michael Winter]

Here's another one.
The DHTML menu I use.
I have no idea what it doesn't like, but it obviously has something to
do with one of the changes I put in to make it work in NN7.0, since the
original works fine.

Is there a debugger for it [Opera], like "javascript:" in NN?

The built-in JavaScript console can trace errors, identifing where the
error originated (an onclick event, for example) and traverse up through
the call stack to the statement that contains the error. It will describe
the error, and show exceptions, too.

If it doesn't pop up automatically[1], you can open it from Window >
Special > JavaScript console.

Be aware that the 'Clear' button only temporarily clears the window. If
you close the console and re-open it, all previous errors will appear.
Only closing the browser will permanently remove all entries. If you
intend to use it to debug, open the console, clear it, then test. Also
notice that it appears on the Taskbar, not as a tab.

Mike


[1] Set by File > Preferences > Multimedia > JavaScript options > Open
JavaScript console on error