Solved

Dropdown menu: saving selections

Posted on 2003-11-10
11
361 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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

708 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

16 Experts available now in Live!

Get 1:1 Help Now