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?
 
seanpowellConnect With a Mentor Commented:
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
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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
 
seanpowellConnect With a Mentor Commented:
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
All Courses

From novice to tech pro — start learning today.