By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,290 Members | 1,384 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > javascript / ajax / dhtml > questions > allowing 2 select menus to work together with javascript?
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,290 IT Pros & Developers. It's quick & easy.

Allowing 2 Select Menus to work together with Javascript?

chunk1978
100+
P: 224
hey everyone,

i've been trying to solve this problem for 2 days straight, with no end in sight. i would greatly appreciate anyone's help.


EXPLANATION: There are 3 Select Menus. The 1st and 2nd Select Menu are "printing options" for 4x6 and 5x7 prints respectively. the 3rd Select Menu holds an "Email" option that can be toggled (appear/reappear) by the 1st and 2nd Select Menus. So if a user selects prints from either 4x6 or 5x7 menu, the "Email" option should disappear so the user can't select it (after all, you can't really email prints right?). The goal is that if there are any 4x6 or 5x7 prints selected (separately or simultaneously), the "Email" option will not be available.


THE PROBLEM: both 4x6 and 5x7 Select Menus work separately, but getting them to work together is the trouble. for example: if you choose any 4x6 prints, the "Email" option disappears, then if you select "4x6 File (With Email Option!)", the "Email" option will reappear. the same goes for the 5x7 Select Menu if it is uses seperatly.

however, if at first a user wants to have 4x6 and 5x7 prints done, the "Email" option disappears. but if the user changes his/her mind about the 5x7 prints, and changes that select menu back to "5x7 File (With Email Option)" while the 4x6 Select Menu is still selecting a print, the "Email" option will reappear! again, the goal is to have the "Email" option unavailable if either of the Select Menus have any prints selected.

[HTML]
<HTML>
<HEAD>

<SCRIPT LANGUAGE=JavaScript>

function ToggleEmail4x6 (val)
{
if(val=="4x6_0")
{AddEmailToReceving()}
else {RemoveEmailFromReceving()}
}

function ToggleEmail5x7 (val)
{
if(val=="5x7_0")
{AddEmailToReceving()}
else {RemoveEmailFromReceving()}
}

function RemoveEmailFromReceving()
{
if (document.IMAGEForm.recevingoptions.options[2].text == "Email")
{document.IMAGEForm.recevingoptions.options[2] = null;}
}

function AddEmailToReceving()
{
if (document.IMAGEForm.recevingoptions.options[2].text != "Email")
{
var indexCounter;
var recevingchoice = document.IMAGEForm.recevingoptions;
var lastoption = new Option();
recevingchoice.options[3] = lastoption;

for (indexCounter = 3;indexCounter > 2; indexCounter--)
{
recevingchoice.options[indexCounter].text = recevingchoice.options[indexCounter - 1].text;
recevingchoice.options[indexCounter].value = recevingchoice.options[indexCounter - 1].value;
}

var option = new Option("Email",2);
recevingchoice.options[2] = option;
}
}

</SCRIPT>
</HEAD>
<BODY>

<FORM NAME=IMAGEForm>
<p><BR><label></label>
A) Please Select Prints </p>
<p>
<label>
<select name=4x6printoptions onChange="ToggleEmail4x6(this.value)">
<option value="4x6_0">4x6 File (With Email Option!)</option>
<option value="4x6_1">One 4x6 Print</option>
<option value="4x6_2">Two 4x6 Prints</option>
<option value="4x6_3">Three 4x6 Prints</option>
</select>
</label>
</p>
<p>
<label>
<select name=5x7printoptions onChange="ToggleEmail5x7(this.value)">
<option value="5x7_0">5x7 File (With Email Option!)</option>
<option value="5x7_1">One 5x7 Print</option>
<option value="5x7_2">Two 5x7 Prints</option>
<option value="5x7_3">Three 5x7 Prints</option>
</select>
</label>
</p>
<p>&nbsp;</p>
<p>B) Please Select your Receving Choice:<BR>
<select name=recevingoptions size="4">
<option value="0">
<option value="1">Courier
<option value="2">Email
<option value="3">Local Pick-Up
</select>
</p>
</FORM>
</BODY>
</HTML>
[/HTML]

Edited by iam_clint: Please wrap your code in [ code] or [ html] tags. I did it for you this time.

Thanks for anyone's help!
Jan 15 '07 #1
Share this Question
Share on Google+
9 Replies
acoder
Expert Mod 15k+
P: 16,027
There are possibly a number of ways, but based on your code, this is one:
Expand|Select|Wrap|Line Numbers
  1. function ToggleEmail4x6 (val) {
  2.  var 5x7val = document.IMAGEForm.5x7printoptions.value;
  3.  if (val=="4x6_0" && 5x7val == "5x7_0") {
  4.   AddEmailToReceving()
  5.  } else { RemoveEmailFromReceving() }
  6. }
The change to the code checks the 5x7 select too and makes sure that is also an email option. Change the ToggleEmail5x7 function too. Alternatively, combine the two into one function and on both onchange handlers call the same function and instead of passing this.value just find the selected values in the function - removes the need for two functions.

If you don't understand anything, just post again.
Jan 15 '07 #2
chunk1978
100+
P: 224
thanks for the reply

There are possibly a number of ways, but based on your code, this is one:
i've tried the code you've written in the last post, but it doesn't work... oddly, since it makes sense in reading... i would ideally like to combine the ToggleEmail4x6 and ToggleEmail5x7, but my new code doesn't work either... forgive me if i'm missing something obvious, i've only bee really working with javascript for about 2 weeks.

here is my new code (that doesn't work)... what is wrong with it? what optimizations could you suggest that would make sense to a novice coder like myself...

Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3.  
  4. <SCRIPT LANGUAGE=JavaScript>
  5.  
  6. function ToggleEmail(val)
  7.     {
  8.     var 4x6val = document.IMAGEForm.4x6printoptions.value;
  9.     var 5x7val = document.IMAGEForm.5x7printoptions.value;
  10.     if (4x6val=="4x6_0" && 5x7val=="5x7_0") 
  11.     {
  12.     AddEmailToReceving()
  13.      } 
  14.      else {RemoveEmailFromReceving()}
  15. }
  16.  
  17. function RemoveEmailFromReceving() 
  18.     {
  19.     if (document.IMAGEForm.recevingoptions.options[2].text == "Email") 
  20.     {document.IMAGEForm.recevingoptions.options[2] = null;} 
  21. }
  22.  
  23. function AddEmailToReceving() 
  24.     {
  25.     if (document.IMAGEForm.recevingoptions.options[2].text != "Email") 
  26.     {
  27.     var indexCounter;
  28.     var recevingchoice = document.IMAGEForm.recevingoptions;
  29.     var lastoption = new Option();
  30.     recevingchoice.options[3] = lastoption;
  31.  
  32.     for (indexCounter = 3;indexCounter > 2; indexCounter--)
  33.     {
  34.     recevingchoice.options[indexCounter].text = recevingchoice.options[indexCounter - 1].text;
  35.     recevingchoice.options[indexCounter].value = recevingchoice.options[indexCounter - 1].value;
  36.     }
  37.  
  38.     var option = new Option("Email",2);
  39.     recevingchoice.options[2] = option;
  40.     }
  41. }
  42.  
  43. </SCRIPT>
  44. </HEAD>
  45. <BODY>
  46.  
  47. <FORM NAME=IMAGEForm>
  48.   <p><BR><label></label>
  49.   A) Please Select Prints </p>
  50.   <p>
  51.     <label>
  52.     <select name=4x6printoptions onChange="ToggleEmail(this.value)">
  53.       <option value="4x6_0">4x6 File (With Email Option!)</option>
  54.       <option value="4x6_1">One 4x6 Print</option>
  55.       <option value="4x6_2">Two 4x6 Prints</option>
  56.       <option value="4x6_3">Three 4x6 Prints</option>
  57.     </select>
  58.     </label>
  59.   </p>
  60.   <p>
  61.     <label>
  62.     <select name=5x7printoptions onChange="ToggleEmail(this.value)">
  63.       <option value="5x7_0">5x7 File (With Email Option!)</option>
  64.       <option value="5x7_1">One 5x7 Print</option>
  65.       <option value="5x7_2">Two 5x7 Prints</option>
  66.       <option value="5x7_3">Three 5x7 Prints</option>
  67.     </select>
  68.     </label>    
  69.   </p>
  70.   <p>&nbsp;</p>
  71.   <p>B) Please Select your Receving Choice:<BR>
  72.       <select name=recevingoptions size="4">
  73.         <option value="0">
  74.         <option value="1">Courier
  75.         <option value="2">Email
  76.         <option value="3">Local Pick-Up 
  77.       </select>
  78.   </p>
  79.   </FORM>
  80. </BODY>
  81. </HTML>
Jan 15 '07 #3
iam_clint
Expert 100+
P: 1,208
Try this out. good luck and reply if it works for you please.
[HTML]
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function ToggleEmail() {
var eval = document.getElementById("4x6").value;
var evalb = document.getElementById("5x7").value;
if (eval=="4x6_0" && evalb=="5x7_0") {
AddEmailToReceving()
} else {
RemoveEmailFromReceving()
}
}

function RemoveEmailFromReceving() {
if (document.IMAGEForm.recevingoptions.options[2].text == "Email")
{document.IMAGEForm.recevingoptions.options[2] = null;}
}
function AddEmailToReceving() {
if (document.IMAGEForm.recevingoptions.options[2].text != "Email") {
var indexCounter;
var recevingchoice = document.IMAGEForm.recevingoptions;
var lastoption = new Option();
recevingchoice.options[3] = lastoption;
for (indexCounter = 3;indexCounter > 2; indexCounter--) {
recevingchoice.options[indexCounter].text = recevingchoice.options[indexCounter - 1].text;
recevingchoice.options[indexCounter].value = recevingchoice.options[indexCounter - 1].value;
}
var option = new Option("Email",2);
recevingchoice.options[2] = option;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="IMAGEForm" ID="IMAGEForm">
<p><BR><label></label>
A) Please Select Prints </p>
<p>
<label>
<select name="4x6printoptions" id="4x6" onChange="ToggleEmail()">
<option value="4x6_0">4x6 File (With Email Option!)</option>
<option value="4x6_1">One 4x6 Print</option>
<option value="4x6_2">Two 4x6 Prints</option>
<option value="4x6_3">Three 4x6 Prints</option>
</select>
</label>
</p>
<p>
<label>
<select name="5x7printoptions" id="5x7" onChange="ToggleEmail()">
<option value="5x7_0">5x7 File (With Email Option!)</option>
<option value="5x7_1">One 5x7 Print</option>
<option value="5x7_2">Two 5x7 Prints</option>
<option value="5x7_3">Three 5x7 Prints</option>
</select>
</label>
</p>
<p>&nbsp;</p>
<p>B) Please Select your Receving Choice:<BR>
<select name=recevingoptions size="4">
<option value="0">
<option value="1">Courier
<option value="2">Email
<option value="3">Local Pick-Up
</select>
</p>
</FORM>
</BODY>
</HTML>
[/HTML]
Jan 15 '07 #4
chunk1978
100+
P: 224
Try this out. good luck and reply if it works for you please.
nope, still doesn't work... :-/ but thank you for trying to help
Jan 15 '07 #5
iam_clint
Expert 100+
P: 1,208
then i am missing what your trying todo

if user selects email in 1
and then the user selects print in other

email should not be available

email should only be available if both are selected as email?
Jan 15 '07 #6
chunk1978
100+
P: 224
then i am missing what your trying todo

if user selects email in 1
and then the user selects print in other

email should not be available

email should only be available if both are selected as email?
you've got it! :-) that is exactly my goal... i'm using dreamweaver and safari/firefox on a mac (but i don't that that's the reason why this code doesn't work, but i could be wrong)

when i say "it's not working" i really mean it doesn't work... like nothing happens when a select menu is pulled down, and i assume that's because the javascript is getting hung-up on a syntax error in the ToggleEmail() function.
Jan 15 '07 #7
iam_clint
Expert 100+
P: 1,208
Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3. <SCRIPT LANGUAGE="JavaScript">
  4. function ToggleEmail() {
  5.  var eval = document.getElementById("4x6").value;
  6.  var evalb = document.getElementById("5x7").value;
  7.  if (eval=="4x6_0" && evalb=="5x7_0") {
  8.    AddEmailToReceving()
  9.   } else { 
  10.       RemoveEmailFromReceving() 
  11.   }
  12. }
  13.  
  14. function RemoveEmailFromReceving() {
  15.  if (document.IMAGEForm.recevingoptions.options[2].text == "Email") 
  16.  {document.IMAGEForm.recevingoptions.options[2] = null;} 
  17. }
  18. function AddEmailToReceving() {
  19.  if (document.IMAGEForm.recevingoptions.options[2].text != "Email") {
  20.  var indexCounter;
  21.  var recevingchoice = document.IMAGEForm.recevingoptions;
  22.  var lastoption = new Option();
  23.  recevingchoice.options[3] = lastoption;
  24.  for (indexCounter = 3;indexCounter > 2; indexCounter--) {
  25.  recevingchoice.options[indexCounter].text = recevingchoice.options[indexCounter - 1].text;
  26.  recevingchoice.options[indexCounter].value = recevingchoice.options[indexCounter - 1].value;
  27.  }
  28.  var option = new Option("Email",2);
  29.  recevingchoice.options[2] = option;
  30.  }
  31. }
  32. </SCRIPT>
  33. </HEAD>
  34. <BODY>
  35. <FORM NAME="IMAGEForm" ID="IMAGEForm">
  36.   <p><BR><label></label>
  37.   A) Please Select Prints </p>
  38.   <p>
  39.  <label>
  40.  <select name="4x6printoptions" id="4x6" onChange="ToggleEmail()">
  41.    <option value="4x6_0">4x6 File (With Email Option!)</option>
  42.    <option value="4x6_1">One 4x6 Print</option>
  43.    <option value="4x6_2">Two 4x6 Prints</option>
  44.    <option value="4x6_3">Three 4x6 Prints</option>
  45.  </select>
  46.  </label>
  47.   </p>
  48.   <p>
  49.  <label>
  50.  <select name="5x7printoptions" id="5x7" onChange="ToggleEmail()">
  51.    <option value="5x7_0">5x7 File (With Email Option!)</option>
  52.    <option value="5x7_1">One 5x7 Print</option>
  53.    <option value="5x7_2">Two 5x7 Prints</option>
  54.    <option value="5x7_3">Three 5x7 Prints</option>
  55.  </select>
  56.  </label> 
  57.   </p>
  58.   <p>&nbsp;</p>
  59.   <p>B) Please Select your Receving Choice:<BR>
  60.    <select name=recevingoptions size="4">
  61.   <option value="0">
  62.   <option value="1">Courier
  63.   <option value="2">Email
  64.   <option value="3">Local Pick-Up 
  65.    </select>
  66.   </p>
  67.   </FORM>
  68. </BODY>
  69. </HTML>
  70.  
This code worked fine in firefox and ie6 for me... make sure you copy and paste the entire code i gave and not just the javascript.
Jan 15 '07 #8
chunk1978
100+
P: 224
IT WORKS!!! i figured it out... in the ToggleEmail() function, there was a getElementById, while there was no real id given in the HTML code... however i've tried various VAR names for the ToggleEmail() function, and it seems that javascript can be extremely tempremental when it comes to VARs and IDs that have numbers in them... (???)

anyway... the following script works:

[HTML]<HTML>
<HEAD>

<SCRIPT LANGUAGE=JavaScript>

function ToggleEmail() {
var ChoiceA = document.getElementById("4x6").value;
var ChoiceB = document.getElementById("5x7").value;
if (ChoiceA=="4x6_0" && ChoiceB=="5x7_0") {
AddEmailToReceving()
}
else{
RemoveEmailFromReceving()
}
}

function RemoveEmailFromReceving()
{
if (document.IMAGEForm.recevingoptions.options[2].text == "Email")
{document.IMAGEForm.recevingoptions.options[2] = null;}
}

function AddEmailToReceving()
{
if (document.IMAGEForm.recevingoptions.options[2].text != "Email")
{
var indexCounter;
var recevingchoice = document.IMAGEForm.recevingoptions;
var lastoption = new Option();
recevingchoice.options[3] = lastoption;

for (indexCounter = 3;indexCounter > 2; indexCounter--)
{
recevingchoice.options[indexCounter].text = recevingchoice.options[indexCounter - 1].text;
recevingchoice.options[indexCounter].value = recevingchoice.options[indexCounter - 1].value;
}

var option = new Option("Email",2);
recevingchoice.options[2] = option;
}
}

</SCRIPT>
</HEAD>
<BODY>

<FORM NAME=IMAGEForm>
<p><BR><label></label>
A) Please Select Prints </p>
<p>
<label>
<select name=4x6printoptions id=4x6 onChange="ToggleEmail()">
<option value="4x6_0">4x6 File (With Email Option!)</option>
<option value="4x6_1">One 4x6 Print</option>
<option value="4x6_2">Two 4x6 Prints</option>
<option value="4x6_3">Three 4x6 Prints</option>
</select>
</label>
</p>
<p>
<label>
<select name=5x7printoptions id=5x7 onChange="ToggleEmail()">
<option value="5x7_0">5x7 File (With Email Option!)</option>
<option value="5x7_1">One 5x7 Print</option>
<option value="5x7_2">Two 5x7 Prints</option>
<option value="5x7_3">Three 5x7 Prints</option>
</select>
</label>
</p>
<p>&nbsp;</p>
<p>B) Please Select your Receving Choice:<BR>
<select name=recevingoptions size="4">
<option value="0">
<option value="1">Courier
<option value="2">Email
<option value="3">Local Pick-Up
</select>
</p>
</FORM>
</BODY>
</HTML>[/HTML]
Jan 15 '07 #9
chunk1978
100+
P: 224
thanks for all your help iam_clint! really appreciate it
Jan 15 '07 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Question stats

  • viewed: 51447
  • replies: 9
  • date asked: Jan 15 '07
BYTES.COM © 2020 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | JavaScript / Ajax / DHTML Answers Sitemap | JavaScript / Ajax / DHTML Insights Sitemap

Follow us to get the Latest Bytes Updates