Solved

Dropdown menu: saving selections

Posted on 2003-11-10
11
362 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

937 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now