Limit selection in list Box


A

Anshul

Hello,
I want to limit the mulyiple selection in list box to 5. Presently
on selection of sixth item I'm giving message but I want that user
should not be able to select the sixth item. I'm using perl as my
platform My current code is given below:

(Here a user must be limited on 5th selection the next index shd not
be selected) Can anybody help.



<html>
<head>
<script type="text/javascript">
function getSelectedIndexes() {
var count=0
var selObj = document.profile.langg
for (var i = 0; i < selObj.options.length; i++) {
if (selObj.options.selected) {
count++;
}
}
//alert(count)
if (count > 5) {
// document.getElementById("mySelect").multiple = false
document.getElementById('txt7').innerHTML = "<font color='red'
style='font-size:12px'><b>You can select 5 languages at a time</b></
font>";
document.getElementById('txt7').style.display="block"
return false;
}else {
document.getElementById('txt7').style.display="none"
}
return true;
}
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
//alert("The shift key was pressed!")
}
else
{
//alert("The shift key was NOT pressed!")
}
}
</script>
</head>

<body onmousedown="isKeyPressed(event)">
<form method="post" action="" onsubmit="return getSelectedIndexes()"
name="profile">
<table width=100% border=0 cellspacing=3 cellpadding=3 valign='top'
align="center">
<tr><td class="Fields">Languages Spoken :</td><td
bgcolor='#F0F7FF'><table width=100% border=0 cellspacing=0
cellpadding=0><tr><td><select name="langg" size="6"
multiple="multiple" onchange="return getSelectedIndexes()"
id="mySelect">
<option value="1">Afrikaans</option>
<option value="2">Ainu</option>
<option value="3">Albanian</option>
<option value="4">Amharic</option>
<option value="5">Amo</option>
<option value="6">Arabic</option>
<option value="7">Armenian</option>
<option value="8">Aymara</option>
<option value="9">Azerbaijani</option>
<option value="10">Azeri</option>
<option value="11">Bahasa</option>
<option value="12">Basque</option>
<option value="13">Batak</option>
<option value="14">Batak toba</option>
<option value="15">Belarusian</option>
<option value="16">Bengali</option>
<option value="17">Bihari</option>
<option value="18">Bosnian</option>
<option value="19">Breton</option>
<option value="20">Bulgarian</option>
<option value="21">Catalan</option>
<option value="22">Cherokee</option>
<option value="23">Chinese (Simplified)</option>
<option value="24">Chinese (Traditional)</option>
<option value="25">Cornish</option>
<option value="26">Corsican</option>
<option value="27">Cree</option>
<option value="28">Croatian</option>
<option value="29">Czech</option>
<option value="30">Danish</option>
<option value="31">Dutch</option>
<option value="32">Edo</option>
<option value="33">English (UK)</option>
<option selected="selected" value="34">English (US)</option>
<option value="35">Esperanto</option>
<option value="36">Estonian</option>
<option selected="selected" value="37">Faroese</option>
<option selected="selected" value="38">Fijian</option>
<option selected="selected" value="39">Filipino</option>
<option value="40">Finnish</option>
<option selected="selected" value="41">French</option>
<option value="42">Frisian</option>
<option value="43">Gaelic</option>
<option value="44">Galician</option>
<option value="45">Gascon</option>
<option value="46">Georgian</option>
<option value="47">German</option>
<option value="48">Greek</option>
<option value="49">Guarani</option>
<option value="50">Gujarati</option>
<option value="51">Hanuno'o</option>
<option value="52">Hausa</option>
<option value="53">Hawaiian</option>
<option value="54">Hebrew</option>
<option value="55">Hindi</option>
<option value="56">Hmong</option>
<option value="57">Hopi</option>
<option value="58">Hungarian</option>
<option value="59">Ibibio</option>
<option value="60">Icelandic</option>
<option value="61">Indonesian</option>
<option value="62">Ingush</option>
<option value="63">Interlingua</option>
<option value="64">Inuktitut</option>
<option value="65">Inupiaq</option>
<option value="66">Irish</option>
<option value="67">Italian</option>
<option value="68">Japanese</option>
<option value="69">Javanese</option>
<option value="70">Kannada</option>
<option value="71">Kanuri</option>
<option value="72">Karelian</option>
<option value="73">Khasi</option>
<option value="74">Kirghiz</option>
<option value="75">Komi</option>
<option value="76">Korean</option>
<option value="77">Kurdish</option>
<option value="78">Kyrgyz</option>
<option value="79">Laothian</option>
<option value="80">Lapp</option>
<option value="81">Latin</option>
<option value="82">Latvian</option>
<option value="83">Lithuanian</option>
<option value="84">Lushootseed</option>
<option value="85">Luxemburgish</option>
<option value="86">Macedonian</option>
<option value="87">Malay</option>
<option value="88">Malayalam</option>
<option value="89">Maltese</option>
<option value="90">Marathi</option>
<option value="91">Mari</option>
<option value="92">Mongolian</option>
<option value="93">Naga</option>
<option value="94">Navajo</option>
<option value="95">Nepali</option>
<option value="96">Norwegian</option>
<option value="97">Norwegian (Nynorsk)</option>
<option value="98">Occitan</option>
<option value="99">Oriya</option>
<option value="100">Pashto</option>
<option value="101">Persian</option>
<option value="102">Polish</option>
<option value="103">Portuguese</option>
<option value="104">Provencal</option>
<option value="105">Prussian</option>
<option value="106">Punjabi</option>
<option value="107">Quechua</option>
<option value="108">Romanian</option>
<option value="109">Romansh</option>
<option value="110">Romany</option>
<option value="111">Russian</option>
<option value="112">Sami</option>
<option value="113">Scots Gaelic</option>
<option value="114">Serbian</option>
<option value="115">Serbo-Croatian</option>
<option value="116">Sesotho</option>
<option value="117">Shona</option>
<option value="118">Sindhi</option>
<option value="119">Sinhalese</option>
<option value="120">Slovak</option>
<option value="121">Slovenian</option>
<option value="122">Somali</option>
<option value="123">Spanish</option>
<option value="124">Sudanese</option>
<option value="125">Swahili</option>
<option value="126">Swedish</option>
<option value="127">Tagalog</option>
<option value="128">Tagbanwa</option>
<option value="129">Tahitian</option>
<option value="130">Tajik</option>
<option value="131">Tamazight</option>
<option value="132">Tamil</option>
<option value="133">Telugu</option>
<option value="134">Thai</option>
<option value="135">Tigriny</option>
<option value="136">Turkish</option>
<option value="137">Turkmen</option>
<option value="138">Twi</option>
<option value="139">Udmurt</option>
<option value="140">Uighur</option>
<option value="141">Ukrainian</option>
<option value="142">Urdu</option>
<option value="143">Uzbek</option>
<option value="144">Vietnamese</option>
<option value="145">Welsh</option>
<option value="146">Xhosa</option>
<option value="147">Yi</option>
<option value="148">Yiddish</option>
<option value="149">Yoruba</option>
<option value="150">Zulu</option>
</select><div id="txt7" style="position:relative; top:5;
display:none;"></div></td><td class="Explanation">Press and Hold the
"CTRL" key to select multiple languages.<br>You can select 5 languages
at a time</td></tr>
</table></form>

</body>
</html>

Thanks
Anshul
 
Ad

Advertisements

K

kaaposc

Anshul said:
Hello,
I want to limit the mulyiple selection in list box to 5. Presently
on selection of sixth item I'm giving message but I want that user
should not be able to select the sixth item. I'm using perl as my
platform My current code is given below:

(Here a user must be limited on 5th selection the next index shd not
be selected) Can anybody help.



<html>
<head>
<script type="text/javascript">
function getSelectedIndexes() {
var count=0
var selObj = document.profile.langg
for (var i = 0; i < selObj.options.length; i++) {
if (selObj.options.selected) {
count++;
}
}
//alert(count)
if (count > 5) {
// document.getElementById("mySelect").multiple = false
document.getElementById('txt7').innerHTML = "<font color='red'
style='font-size:12px'><b>You can select 5 languages at a time</b></
font>";
document.getElementById('txt7').style.display="block"
return false;
}else {
document.getElementById('txt7').style.display="none"
}
return true;
}
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
//alert("The shift key was pressed!")
}
else
{
//alert("The shift key was NOT pressed!")
}
}
</script>
</head>

<body onmousedown="isKeyPressed(event)">
<form method="post" action="" onsubmit="return getSelectedIndexes()"
name="profile">
<table width=100% border=0 cellspacing=3 cellpadding=3 valign='top'
align="center">
<tr><td class="Fields">Languages Spoken :</td><td
bgcolor='#F0F7FF'><table width=100% border=0 cellspacing=0
cellpadding=0><tr><td><select name="langg" size="6"
multiple="multiple" onchange="return getSelectedIndexes()"
id="mySelect">

<option value="82">Latvian</option>
<skip>

how about DEselecting the sixth item via script?
 
E

Erwin Moller

Anshul said:
Hello,
I want to limit the mulyiple selection in list box to 5. Presently
on selection of sixth item I'm giving message but I want that user
should not be able to select the sixth item. I'm using perl as my
platform My current code is given below:

(Here a user must be limited on 5th selection the next index shd not
be selected) Can anybody help.



<html>
<head>
<script type="text/javascript">
function getSelectedIndexes() {
var count=0
var selObj = document.profile.langg
for (var i = 0; i < selObj.options.length; i++) {
if (selObj.options.selected) {
count++;
}
}
//alert(count)
if (count > 5) {
// document.getElementById("mySelect").multiple = false
document.getElementById('txt7').innerHTML = "<font color='red'
style='font-size:12px'><b>You can select 5 languages at a time</b></
font>";
document.getElementById('txt7').style.display="block"
return false;
}else {
document.getElementById('txt7').style.display="none"
}
return true;
}
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
//alert("The shift key was pressed!")
}
else
{
//alert("The shift key was NOT pressed!")
}
}
</script>
</head>

<body onmousedown="isKeyPressed(event)">
<form method="post" action="" onsubmit="return getSelectedIndexes()"
name="profile">
<table width=100% border=0 cellspacing=3 cellpadding=3 valign='top'
align="center">
<tr><td class="Fields">Languages Spoken :</td><td
bgcolor='#F0F7FF'><table width=100% border=0 cellspacing=0
cellpadding=0><tr><td><select name="langg" size="6"
multiple="multiple" onchange="return getSelectedIndexes()"
id="mySelect">
<option value="1">Afrikaans</option>
<option value="2">Ainu</option>
<option value="3">Albanian</option>
<option value="4">Amharic</option>
<option value="5">Amo</option>
<option value="6">Arabic</option>
<option value="7">Armenian</option>
<option value="8">Aymara</option>
<option value="9">Azerbaijani</option>
<option value="10">Azeri</option>
<option value="11">Bahasa</option>
<option value="12">Basque</option>
<option value="13">Batak</option>
<option value="14">Batak toba</option>
<option value="15">Belarusian</option>
<option value="16">Bengali</option>
<option value="17">Bihari</option>
<option value="18">Bosnian</option>
<option value="19">Breton</option>
<option value="20">Bulgarian</option>
<option value="21">Catalan</option>
<option value="22">Cherokee</option>
<option value="23">Chinese (Simplified)</option>
<option value="24">Chinese (Traditional)</option>
<option value="25">Cornish</option>
<option value="26">Corsican</option>
<option value="27">Cree</option>
<option value="28">Croatian</option>
<option value="29">Czech</option>
<option value="30">Danish</option>
<option value="31">Dutch</option>
<option value="32">Edo</option>
<option value="33">English (UK)</option>
<option selected="selected" value="34">English (US)</option>
<option value="35">Esperanto</option>
<option value="36">Estonian</option>
<option selected="selected" value="37">Faroese</option>
<option selected="selected" value="38">Fijian</option>
<option selected="selected" value="39">Filipino</option>
<option value="40">Finnish</option>
<option selected="selected" value="41">French</option>
<option value="42">Frisian</option>
<option value="43">Gaelic</option>
<option value="44">Galician</option>
<option value="45">Gascon</option>
<option value="46">Georgian</option>
<option value="47">German</option>
<option value="48">Greek</option>
<option value="49">Guarani</option>
<option value="50">Gujarati</option>
<option value="51">Hanuno'o</option>
<option value="52">Hausa</option>
<option value="53">Hawaiian</option>
<option value="54">Hebrew</option>
<option value="55">Hindi</option>
<option value="56">Hmong</option>
<option value="57">Hopi</option>
<option value="58">Hungarian</option>
<option value="59">Ibibio</option>
<option value="60">Icelandic</option>
<option value="61">Indonesian</option>
<option value="62">Ingush</option>
<option value="63">Interlingua</option>
<option value="64">Inuktitut</option>
<option value="65">Inupiaq</option>
<option value="66">Irish</option>
<option value="67">Italian</option>
<option value="68">Japanese</option>
<option value="69">Javanese</option>
<option value="70">Kannada</option>
<option value="71">Kanuri</option>
<option value="72">Karelian</option>
<option value="73">Khasi</option>
<option value="74">Kirghiz</option>
<option value="75">Komi</option>
<option value="76">Korean</option>
<option value="77">Kurdish</option>
<option value="78">Kyrgyz</option>
<option value="79">Laothian</option>
<option value="80">Lapp</option>
<option value="81">Latin</option>
<option value="82">Latvian</option>
<option value="83">Lithuanian</option>
<option value="84">Lushootseed</option>
<option value="85">Luxemburgish</option>
<option value="86">Macedonian</option>
<option value="87">Malay</option>
<option value="88">Malayalam</option>
<option value="89">Maltese</option>
<option value="90">Marathi</option>
<option value="91">Mari</option>
<option value="92">Mongolian</option>
<option value="93">Naga</option>
<option value="94">Navajo</option>
<option value="95">Nepali</option>
<option value="96">Norwegian</option>
<option value="97">Norwegian (Nynorsk)</option>
<option value="98">Occitan</option>
<option value="99">Oriya</option>
<option value="100">Pashto</option>
<option value="101">Persian</option>
<option value="102">Polish</option>
<option value="103">Portuguese</option>
<option value="104">Provencal</option>
<option value="105">Prussian</option>
<option value="106">Punjabi</option>
<option value="107">Quechua</option>
<option value="108">Romanian</option>
<option value="109">Romansh</option>
<option value="110">Romany</option>
<option value="111">Russian</option>
<option value="112">Sami</option>
<option value="113">Scots Gaelic</option>
<option value="114">Serbian</option>
<option value="115">Serbo-Croatian</option>
<option value="116">Sesotho</option>
<option value="117">Shona</option>
<option value="118">Sindhi</option>
<option value="119">Sinhalese</option>
<option value="120">Slovak</option>
<option value="121">Slovenian</option>
<option value="122">Somali</option>
<option value="123">Spanish</option>
<option value="124">Sudanese</option>
<option value="125">Swahili</option>
<option value="126">Swedish</option>
<option value="127">Tagalog</option>
<option value="128">Tagbanwa</option>
<option value="129">Tahitian</option>
<option value="130">Tajik</option>
<option value="131">Tamazight</option>
<option value="132">Tamil</option>
<option value="133">Telugu</option>
<option value="134">Thai</option>
<option value="135">Tigriny</option>
<option value="136">Turkish</option>
<option value="137">Turkmen</option>
<option value="138">Twi</option>
<option value="139">Udmurt</option>
<option value="140">Uighur</option>
<option value="141">Ukrainian</option>
<option value="142">Urdu</option>
<option value="143">Uzbek</option>
<option value="144">Vietnamese</option>
<option value="145">Welsh</option>
<option value="146">Xhosa</option>
<option value="147">Yi</option>
<option value="148">Yiddish</option>
<option value="149">Yoruba</option>
<option value="150">Zulu</option>
</select><div id="txt7" style="position:relative; top:5;
display:none;"></div></td><td class="Explanation">Press and Hold the
"CTRL" key to select multiple languages.<br>You can select 5 languages
at a time</td></tr>
</table></form>

</body>
</html>

Thanks
Anshul


Hi Anshul,

What about this approach:
1) Remember each selected item.
2) Use onChange event to find HOW many items are selected.
3) If more than 5, deselect all others, except the 5 you stored internally.

That way you circumvent the SHIFT-select-a-bunch problem.

And of course, check serverside too if no more than 5 are selected (never
trust JS security when receiving data)

Regards,
Erwin Moller
 
G

Gary Hasler

Anshul said:
Hello,
I want to limit the mulyiple selection in list box to 5.

Here's a thought--just have 5 different lists, each limited to single
selection. Takes up a lot of space but is simple for the user, plus
they can see what 5 they've chosen.
 
Ad

Advertisements

A

Anshul

Anshul said:
Hello,
I want to limit the mulyiple selection in list box to 5. Presently
on selection of sixth item I'm giving message but I want that user
should not be able to select the sixth item. I'm using perl as my
platform My current code is given below:
(Here a user must be limited on 5th selection the next index shd not
be selected) Can anybody help.
<html>
<head>
<script type="text/javascript">
function getSelectedIndexes() {
var count=0
var selObj = document.profile.langg
for (var i = 0; i < selObj.options.length; i++) {
if (selObj.options.selected) {
count++;
}
}
//alert(count)
if (count > 5) {
// document.getElementById("mySelect").multiple = false
document.getElementById('txt7').innerHTML = "<font color='red'
style='font-size:12px'><b>You can select 5 languages at a time</b></
font>";
document.getElementById('txt7').style.display="block"
return false;
}else {
document.getElementById('txt7').style.display="none"
}
return true;
}
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
//alert("The shift key was pressed!")
}
else
{
//alert("The shift key was NOT pressed!")
}
}
</script>
</head>

<body onmousedown="isKeyPressed(event)">
<form method="post" action="" onsubmit="return getSelectedIndexes()"
name="profile">
<table width=100% border=0 cellspacing=3 cellpadding=3 valign='top'
align="center">
<tr><td class="Fields">Languages Spoken :</td><td
bgcolor='#F0F7FF'><table width=100% border=0 cellspacing=0
cellpadding=0><tr><td><select name="langg" size="6"
multiple="multiple" onchange="return getSelectedIndexes()"
id="mySelect">
<option value="1">Afrikaans</option>
<option value="2">Ainu</option>
<option value="3">Albanian</option>
<option value="4">Amharic</option>
<option value="5">Amo</option>
<option value="6">Arabic</option>
<option value="7">Armenian</option>
<option value="8">Aymara</option>
<option value="9">Azerbaijani</option>
<option value="10">Azeri</option>
<option value="11">Bahasa</option>
<option value="12">Basque</option>
<option value="13">Batak</option>
<option value="14">Batak toba</option>
<option value="15">Belarusian</option>
<option value="16">Bengali</option>
<option value="17">Bihari</option>
<option value="18">Bosnian</option>
<option value="19">Breton</option>
<option value="20">Bulgarian</option>
<option value="21">Catalan</option>
<option value="22">Cherokee</option>
<option value="23">Chinese (Simplified)</option>
<option value="24">Chinese (Traditional)</option>
<option value="25">Cornish</option>
<option value="26">Corsican</option>
<option value="27">Cree</option>
<option value="28">Croatian</option>
<option value="29">Czech</option>
<option value="30">Danish</option>
<option value="31">Dutch</option>
<option value="32">Edo</option>
<option value="33">English (UK)</option>
<option selected="selected" value="34">English (US)</option>
<option value="35">Esperanto</option>
<option value="36">Estonian</option>
<option selected="selected" value="37">Faroese</option>
<option selected="selected" value="38">Fijian</option>
<option selected="selected" value="39">Filipino</option>
<option value="40">Finnish</option>
<option selected="selected" value="41">French</option>
<option value="42">Frisian</option>
<option value="43">Gaelic</option>
<option value="44">Galician</option>
<option value="45">Gascon</option>
<option value="46">Georgian</option>
<option value="47">German</option>
<option value="48">Greek</option>
<option value="49">Guarani</option>
<option value="50">Gujarati</option>
<option value="51">Hanuno'o</option>
<option value="52">Hausa</option>
<option value="53">Hawaiian</option>
<option value="54">Hebrew</option>
<option value="55">Hindi</option>
<option value="56">Hmong</option>
<option value="57">Hopi</option>
<option value="58">Hungarian</option>
<option value="59">Ibibio</option>
<option value="60">Icelandic</option>
<option value="61">Indonesian</option>
<option value="62">Ingush</option>
<option value="63">Interlingua</option>
<option value="64">Inuktitut</option>
<option value="65">Inupiaq</option>
<option value="66">Irish</option>
<option value="67">Italian</option>
<option value="68">Japanese</option>
<option value="69">Javanese</option>
<option value="70">Kannada</option>
<option value="71">Kanuri</option>
<option value="72">Karelian</option>
<option value="73">Khasi</option>
<option value="74">Kirghiz</option>
<option value="75">Komi</option>
<option value="76">Korean</option>
<option value="77">Kurdish</option>
<option value="78">Kyrgyz</option>
<option value="79">Laothian</option>
<option value="80">Lapp</option>
<option value="81">Latin</option>
<option value="82">Latvian</option>
<option value="83">Lithuanian</option>
<option value="84">Lushootseed</option>
<option value="85">Luxemburgish</option>
<option value="86">Macedonian</option>
<option value="87">Malay</option>
<option value="88">Malayalam</option>
<option value="89">Maltese</option>
<option value="90">Marathi</option>
<option value="91">Mari</option>
<option value="92">Mongolian</option>
<option value="93">Naga</option>
<option value="94">Navajo</option>
<option value="95">Nepali</option>
<option value="96">Norwegian</option>
<option value="97">Norwegian (Nynorsk)</option>
<option value="98">Occitan</option>
<option value="99">Oriya</option>
<option value="100">Pashto</option>
<option value="101">Persian</option>
<option value="102">Polish</option>
<option value="103">Portuguese</option>
<option value="104">Provencal</option>
<option value="105">Prussian</option>
<option value="106">Punjabi</option>
<option value="107">Quechua</option>
<option value="108">Romanian</option>
<option value="109">Romansh</option>
<option value="110">Romany</option>
<option value="111">Russian</option>
<option value="112">Sami</option>
<option value="113">Scots Gaelic</option>
<option value="114">Serbian</option>
<option value="115">Serbo-Croatian</option>
<option value="116">Sesotho</option>
<option value="117">Shona</option>
<option value="118">Sindhi</option>
<option value="119">Sinhalese</option>
<option value="120">Slovak</option>
<option value="121">Slovenian</option>
<option value="122">Somali</option>
<option value="123">Spanish</option>
<option value="124">Sudanese</option>
<option value="125">Swahili</option>
<option value="126">Swedish</option>
<option value="127">Tagalog</option>
<option value="128">Tagbanwa</option>
<option value="129">Tahitian</option>
<option value="130">Tajik</option>
<option value="131">Tamazight</option>
<option value="132">Tamil</option>
<option value="133">Telugu</option>
<option value="134">Thai</option>
<option value="135">Tigriny</option>
<option value="136">Turkish</option>
<option value="137">Turkmen</option>
<option value="138">Twi</option>
<option value="139">Udmurt</option>
<option value="140">Uighur</option>
<option value="141">Ukrainian</option>
<option value="142">Urdu</option>
<option value="143">Uzbek</option>
<option value="144">Vietnamese</option>
<option value="145">Welsh</option>
<option value="146">Xhosa</option>
<option value="147">Yi</option>
<option value="148">Yiddish</option>
<option value="149">Yoruba</option>
<option value="150">Zulu</option>
</select><div id="txt7" style="position:relative; top:5;
display:none;"></div></td><td class="Explanation">Press and Hold the
"CTRL" key to select multiple languages.<br>You can select 5 languages
at a time</td></tr>
</table></form>

Thanks
Anshul

Hi Anshul,

What about this approach:
1) Remember each selected item.
2) Use onChange event to find HOW many items are selected.
3) If more than 5, deselect all others, except the 5 you stored internally.

That way you circumvent the SHIFT-select-a-bunch problem.

And of course, check serverside too if no more than 5 are selected (never
trust JS security when receiving data)

Regards,
Erwin Moller


Thanx Erwin,
This method had worked out
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top