Dropdown menu: saving selections

Hi,
I wouild like to create some type of menu whereby the user can only select a maximum of three selections from a list/grid - I was thinking that this could be implemented via a drop down menu - but now not so sure.
Any help would be grand!

Thanks
delic8teAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

seanpowellCommented:
Try this:

<html>
<head>
<title>Limit selections</title>
<script type="text/javascript" language="javascript">
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;
}
}

</script>
</head>
<body>
<form>
<strong>Please select no more than 3 options.</strong><br />
<select size="6" multiple="multiple" onchange="return limitOptions(this, 3)">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select>
</form>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
delic8teAuthor Commented:
hi,

thanks - I tried this (ie copying and pasting) - but the message 'The maximum number of selectons allowed in this list....' didnt appear!
As I am a newbie to this, do I have to alter the function?
Any help would be grand!
0
seanpowellCommented:
It may be a browser issue. Go here:
http://www3.sympatico.ca/spowell/select.html

If it works, it's how it was pasted. If it doesn't, it's the browser. Which one are you using?

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

delic8teAuthor Commented:
Hi again!

Aha - it does work - but only if I do any of the following:
1) Click and drag 4 options
2) Click and hold down the shift/ctrl key and select 4 options

if would be really cool if I just had to click on three options WITHOUT having to hold down the ctrl/shift key or click and drag. Is this possible?

Cheers
0
seanpowellCommented:
Okay - I've modified the page: (Refresh the page in your browser to view this latest version)
http://www3.sympatico.ca/spowell/select.html

That's about as close as we're going to get...
0
delic8teAuthor Commented:
ok - this is fantastic!! - but I have one more thing to ask - (of which I will give you an extra 100pts!!!!) - is it possible to modify this so that you can select checkboxes instead of items from a list? - i.e where you can only select 3 checkboxes????????

Many thanks once again!
0
seanpowellCommented:
Why not...

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Checkboxes</title>
<script>
<!-- Begin
function countChoices(obj) {
max = 3; // max. number allowed at a time

box1 = obj.form.box1.checked;  // your checkboxes here, add more if necessary
box2 = obj.form.box2.checked;
box3 = obj.form.box3.checked;
box4 = obj.form.box4.checked;

count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0) + (box4 ? 1 : 0);
// If you have more checkboxes on your form
// add more  (box_ ? 1 : 0)  's separated by '+'

if (count > max) {
alert("Oops!  You can only choose up to " + max + " choices! \nUncheck an option if you want to pick another.");
obj.checked = false;
   }
}
//  End -->
</script>
</head>
<body>
<form>
<p>Please select no more than 3 checkboxes:</p>
<p><input type=checkbox name=box1 onClick="countChoices(this)">Option 1</p>
<p><input type=checkbox name=box2 onClick="countChoices(this)">Option 2</p>
<p><input type=checkbox name=box3 onClick="countChoices(this)">Option 3</p>
<p><input type=checkbox name=box4 onClick="countChoices(this)">Option 4</p>
</form>
</body>
</html>
0
delic8teAuthor Commented:
Hi george - needing your help once more - hope your'r not too sick of me yet!
Ok here's what I have done:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Checkboxes</title>
<script>
<!-- Begin
function countChoices(obj) {
max = 3; // max. number allowed at a time

box1 = obj.form.Q12587.checked;  // your checkboxes here, add more if necessary
box2 = obj.form.Q12587.checked;
box3 = obj.form.Q12587.checked;
box4 = obj.form.Q12587.checked;
box5 = obj.form.box5.checked;
box6 = obj.form.box6.checked;
box7 = obj.form.box7.checked;
box8 = obj.form.box8.checked;
box9 = obj.form.box9.checked;
box10 = obj.form.box10.checked;
box11 = obj.form.box11.checked;

count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0) + (box4 ? 1 : 0) ;//+ (box5 ? 1 : 0) + (box6 ? 1 : 0) + (box7 ? 1 : 0)+ (box3 ? 1 : 0) + (box8 ? 1 : 0) + (box9 ? 1 : 0) + (box10 ? 1 : 0) + (box11 ? 1 : 0);  
// If you have more checkboxes on your form
// add more  (box_ ? 1 : 0)  's separated by '+'

if (count > max) {
alert("Oops!  You can only choose up to " + max + " choices! \nUncheck an option if you want to pick another.");
obj.checked = false;
   }
}
//  End -->


</script>
</head>
<body>
<form id=form1 name=form1>

<TABLE ALIGN="CENTER" WIDTH="100%"><CAPTION><BIG><STRONG></STRONG></BIG></CAPTION>

<TR>

<TD COLSPAN="3" BGCOLOR="191970" ALIGN="CENTER"><FONT size = 2 COLOR="WHITE">Select 3 options</FONT size = 2></TD>
</TR>


<TR>

<TD  align = 'left' valign = 'top'  BGCOLOR="WHITE" VALIGN="CENTER" ALIGN="LEFT">Q18b)</TD  align = 'left' valign = 'top' ><TD valign = 'top' BGCOLOR="WHITE" VALIGN="CENTER" ALIGN="LEFT">Which of the following would encourage you to print more photos at home.  Please give up to three main reasons for printing more photos at home.</TD valign = 'top'><TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT><TABLE ALIGN="CENTER" WIDTH="100%"><CAPTION><BIG><STRONG></STRONG></BIG></CAPTION>

<TR>

<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Cheaper ink cartridges</FONT></TD valign = 'middle' >
<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT><INPUT TYPE="CHECKBOX" NAME="Q12587" VALUE="1"></FONT></TD valign = 'middle' onClick="countChoices(this)" >
</TR>


<TR>

<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Cheaper photo paper</FONT></TD valign = 'middle' >
<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT><INPUT TYPE="CHECKBOX" NAME="Q12587" VALUE="2"></FONT></TD valign = 'middle' onClick="countChoices(this)">

</TR>


<TR>

<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Better availability of ink cartridges and photo paper</FONT></TD valign = 'middle'
<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT><INPUT TYPE="CHECKBOX" NAME="Q12587" VALUE="3"></FONT></TD valign = 'middle'onClick="countChoices(this)">

</TR>


<TR>

<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Having a better quality digital camera</FONT></TD valign = 'middle' >
<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT><INPUT TYPE="CHECKBOX" NAME="Q12587" VALUE="4"></FONT></TD valign = 'middle' onClick="countChoices(this")>

</TR>


<TR>

<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Easier to print at home</FONT></TD valign = 'middle' >
<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT><INPUT TYPE="CHECKBOX" NAME="Q12587" VALUE="5"></FONT></TD valign = 'middle' onClick="countChoices(this)">

</TR>


<TR>

<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Better quality from printing at home</FONT></TD valign = 'middle' >
<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT><INPUT TYPE="CHECKBOX" NAME="Q12587" VALUE="6"></FONT></TD valign = 'middle' onClick="countChoices(this)">

</TR>


<TR>

<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Having a printer which would print photos faster</FONT></TD valign = 'middle' >
<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT><INPUT TYPE="CHECKBOX" NAME="Q12587" VALUE="7"></FONT></TD valign = 'middle' onClick="countChoices(this)">

</TR>


<TR>

<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Having a printer with better design</FONT></TD valign = 'middle' >
<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT><INPUT TYPE="CHECKBOX" NAME="Q12587" VALUE="8"></FONT></TD valign = 'middle' onClick="countChoices(this)">

</TR>


<TR>

<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>If home prints were to last as long as traditional prints without fading</FONT></TD valign = 'middle' >
<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT><INPUT TYPE="CHECKBOX" NAME="Q12587" VALUE="9"></FONT></TD valign = 'middle' onClick="countChoices(this)">

</TR>


<TR>

<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Easier to use photo software</FONT></TD valign = 'middle' >
<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT><INPUT TYPE="CHECKBOX" NAME="Q12587" VALUE="10"></FONT></TD valign = 'middle' onClick="countChoices(this)">

</TR>


<TR>

<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Other</FONT></TD valign = 'middle' >
<TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT><INPUT TYPE="CHECKBOX" NAME="Q12587" VALUE="11"></FONT></TD valign = 'middle' onClick="countChoices(this)">

</TR>

</TABLE>
</FONT></TD valign = 'middle' >

</TR>


<TR>

<TD COLSPAN="3"><HR COLOR ="7683df"></TD>
</TR>

</TABLE>

</form>
</body>
</html>


now, this doesnt seem to work - can you figure out why? please note that the checkbox NAME of Q12587 has to remain like this as its getting the options from a database - if you know what I mean!? Help me please! Thanks!
0
seanpowellCommented:
That code you posted is a mess! Let me clean it up first...
0
delic8teAuthor Commented:
oops - sorry - just going mad this end - thanks for this - waiting eagerly for our reply.....
0
seanpowellCommented:
Okay - you need to code it like this...

NOTE: The database values should be aplied to the "value" of the checkboxes - not the name. The name of the checkbox is used by the script (box1, box2, etc.)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Checkboxes</title>
<script>
<!-- Begin
function countChoices(obj) {
max = 3; // max. number allowed at a time

box1 = obj.form.box1.checked;
box2 = obj.form.box2.checked;
box3 = obj.form.box3.checked;
box4 = obj.form.box4.checked;
box5 = obj.form.box5.checked;
box6 = obj.form.box6.checked;
box7 = obj.form.box7.checked;
box8 = obj.form.box8.checked;
box9 = obj.form.box9.checked;
box10 = obj.form.box10.checked;
box11 = obj.form.box11.checked;

count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0) + (box4 ? 1 : 0) + (box5 ? 1 : 0) + (box6 ? 1 : 0) + (box7 ? 1 : 0) + (box8 ? 1 : 0) + (box9 ? 1 : 0) + (box10 ? 1 : 0) + (box11 ? 1 : 0);

if (count > max) {
alert("Oops!  You can only choose up to " + max + " choices! \nUncheck an option if you want to pick another.");
obj.checked = false;
   }
}
//  End -->
</script>
</head>
<body>
<form id=form name=form>
<TABLE ALIGN="CENTER" WIDTH="100%">
<CAPTION><BIG><STRONG></STRONG></BIG></CAPTION>
  <TR>
    <TD COLSPAN="3" BGCOLOR="191970" ALIGN="CENTER"><FONT size = 2 COLOR="WHITE">Select 3 options</FONT size = 2></TD>
  </TR>
  <TR>
    <TD  align = 'left' valign = 'top'  BGCOLOR="WHITE" VALIGN="CENTER" ALIGN="LEFT">Q18b)</TD>
    <TD valign = 'top' BGCOLOR="WHITE" VALIGN="CENTER" ALIGN="LEFT">Which of the following would encourage you to print more photos at home.  Please give up to three main reasons for printing more photos at home.</TD>
    <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%">
    <TABLE ALIGN="CENTER" WIDTH="100%">
    <CAPTION><BIG><STRONG></STRONG></BIG></CAPTION>
      <TR>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Cheaper ink cartridges</FONT></td>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><INPUT TYPE="CHECKBOX" VALUE="Q12587" NAME="box1" onClick="countChoices(this)"></td>
      </TR>
      <TR>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Cheaper photo paper</FONT></td>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><INPUT TYPE="CHECKBOX" VALUE="Q12587" NAME="box2" onClick="countChoices(this)"></td>
      </TR>
      <TR>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Better availability of ink cartridges and photo paper</FONT></td>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><INPUT TYPE="CHECKBOX" VALUE="Q12587" NAME="box3" onClick="countChoices(this)"></td>
      </TR>
      <TR>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Having a better quality digital camera</FONT></td>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><INPUT TYPE="CHECKBOX" VALUE="Q12587" NAME="box4" onClick="countChoices(this)"></td>
      </TR>
      <TR>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Easier to print at home</FONT></td>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><INPUT TYPE="CHECKBOX" VALUE="Q12587" NAME="box5" onClick="countChoices(this)"></td>
      </TR>
      <TR>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Better quality from printing at home</FONT></td>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><INPUT TYPE="CHECKBOX" VALUE="Q12587" NAME="box6" onClick="countChoices(this)"></td>
      </TR>
      <TR>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Having a printer which would print photos faster</FONT></td>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><INPUT TYPE="CHECKBOX" VALUE="Q12587" NAME="box7" onClick="countChoices(this)"></td>
      </TR>
      <TR>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Having a printer with better design</FONT></td>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><INPUT TYPE="CHECKBOX" VALUE="Q12587" NAME="box8" onClick="countChoices(this)"></td>
      </TR>
      <TR>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>If home prints were to last as long as traditional prints without fading</FONT></td>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><INPUT TYPE="CHECKBOX" VALUE="Q12587" NAME="box9" onClick="countChoices(this)"></td>
      </TR>
      <TR>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Easier to use photo software</FONT></td>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><INPUT TYPE="CHECKBOX" VALUE="Q12587" NAME="box10" onClick="countChoices(this)"></td>
      </TR>
      <TR>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><FONT>Other</FONT></td>
        <TD valign = 'middle'  BGCOLOR="WHITE" VALIGN="TOP" width="%"><INPUT TYPE="CHECKBOX" VALUE="Q12587" NAME="box11" onClick="countChoices(this)"></td>
      </TR>
    </TABLE></td>
  </TR>
  <TR>
    <TD COLSPAN="3"><HR COLOR ="7683df"></TD>
  </TR>
</TABLE>
</form>
</body>
</html>
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.