Solved

Dropdown menu: saving selections

Posted on 2003-11-10
11
363 Views
Last Modified: 2010-04-09
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
0
Comment
Question by:delic8te
  • 6
  • 5
11 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
ID: 9716184
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
 

Author Comment

by:delic8te
ID: 9721148
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9721298
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
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 

Author Comment

by:delic8te
ID: 9721319
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9721366
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
 

Author Comment

by:delic8te
ID: 9721452
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
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 500 total points
ID: 9721477
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
 

Author Comment

by:delic8te
ID: 9722464
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9722551
That code you posted is a mess! Let me clean it up first...
0
 

Author Comment

by:delic8te
ID: 9722617
oops - sorry - just going mad this end - thanks for this - waiting eagerly for our reply.....
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9722671
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

Featured Post

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question