473,320 Members | 1,920 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Allowing 2 Select Menus to work together with Javascript?

chunk1978
224 100+
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
9 51959
acoder
16,027 Expert Mod 8TB
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
224 100+
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
1,208 Expert 1GB
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
224 100+
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
1,208 Expert 1GB
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
224 100+
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
1,208 Expert 1GB
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
224 100+
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
224 100+
thanks for all your help iam_clint! really appreciate it
Jan 15 '07 #10

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

Similar topics

2
by: Daniel Bickett | last post by:
Hello, I am writing an application using two event-driven libraries: wxPython, and twisted. The first problem I encountered in the program is the confliction between the two all-consuming...
4
by: Paul | last post by:
I have run into a strange problem with a site I am working on. My SELECT queries work fine, but I just tried to add an UPDATE statement and it fails. A test showed that INSERT fails also. I created...
2
by: BrianP | last post by:
Hi, I have had to invent a work-around to get past what looks like a JavaScript bug, the malfunctioning Perl-like JavaScript array functions including SPLICE() and UNSHIFT(). I have boiled it...
8
by: VM | last post by:
If I want to run this query ( " col_output like '<del> *BOX' " ), it'll throw an exception. How can I search for any rows that begin with '<del>' and end with 'BOX'? Would it also be possible to...
2
by: Nathan Pinno | last post by:
Hi, Can anyone tell me if pygame and Tkinter can work together in the same application? I thought I'd better ask before trying it, since both use widgets. Thanks, Nathan Pinno --
2
by: abracad_1999 | last post by:
I would like to create a form in which a 2nd select box appears depending on the value selected in the 1st select box. The values of the 2nd select box will come from a database. My question is...
4
by: Steve | last post by:
I noticed with IE 6 that SELECT menus will not let div tags cover them/ make them invisible. Is there a workaround for this that does not involve using the iFrame or using javascript to shut off...
6
by: cathyisfrustrated | last post by:
Hey, I've been trying to learn javascript for a few days. I'm a bit stuck! I'd appreciate any links to get me going in the right direction or any advice I can get. I've written a...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.