Multiple Drop-Down Menu Selections

[AndyL]

Hello,

I have 2 drop-down menus on a web-page. I want the user to choose a value from drop-down menu #1, then a value from drop-down menu #2, press a 'Submit' button and then it will do something. The resulting action needs to be dependent on both drop-down menu selections. I am fairly happy that my 2 <FORM>s are correct but am unsure what function (under "onClick") I should be calling to capture both the drop-down menu selections, and what the contents of the actual funtion need to be .... ?

So far I have the following code:

function check (checkReasonSelection)
{
for (var i=0; i<checkReasonSelection.reasonForm.reasonLinks.length; i++)
{
if (checkReasonSelection.reasonForm.reasonLinks.options[i].value)
{
var reason=checkReasonSelection.reasonForm.reasonLinks.options[i].value;
if (reason=="all cards")
{
alert ("yippeee!");
}
break;
}
}
}

<FORM name="reasonForm">
<SELECT name="reasonLinks">
<OPTION SELECTED value="all cards">All Cards</OPTION>
<OPTION value="birthday">Birthday</OPTION>
<OPTION value="christmas">Christmas</OPTION>
<OPTION value="easter">Easter</OPTION>
</SELECT>
<INPUT type="button" name="step3" value="Step 3..." onClick="window.location=document.reasonForm.reasonLinks.options[document.reasonForm.reasonLinks.selectedIndex].value">
</FORM>

<FORM name="typeForm">
<SELECT name="typeLinks">
<OPTION SELECTED value="all cards">All Cards</OPTION>
<OPTION value="humorous">Humorous</OPTION>
<OPTION value="modern art">Modern Art</OPTION>
<OPTION value="traditional">Traditional</OPTION>
<OPTION value="rude">Rude</OPTION>
<INPUT type="button" name="step3" value="Step 3..." onClick="window.location=document.typeForm.typeLinks.options[document.typeForm.typeLinks.selectedIndex].value">
</FORM>

Many thanks for any helpful suggestions,
Andy

[cheesebagpipe]

2 questions:

Any particular reason you're using two separate forms?

What does 'it will do something' mean?

[AndyL]

Thanks for your reply.

I don't know why I was using 2 forms - perhaps an oversight/inexperience?!. I have changed this - thanks for pointing it out though.

I have actually worked out how to capture the user's choice from drop-down menu #1 and then from drop-down menu #2. My 'do something' on Submit was basically to store the 2 values selected from both drop-down menus into 2 variables, perform a search on a database and return the results into another webpage. I am currently working on the database submission part ...

My code now resembles the following:

<FORM name="myForm">
Step 1 - select the reason of the occassion:
<BR/><BR/>
<SELECT name="reasonMenu">
<OPTION SELECTED value="All Cards">All Cards</OPTION>
<OPTION value="Birthday">Birthday</OPTION>
<OPTION value="Christmas">Christmas</OPTION>
<OPTION value="Easter">Easter</OPTION>
</SELECT>

Step 2 - select the type of card required:
<BR/><BR/>
<SELECT name="typeMenu">
<OPTION SELECTED value="All Cards">All Cards</OPTION>
<OPTION value="Humorous">Humorous</OPTION>
<OPTION value="Modern Art">Modern Art</OPTION>
<OPTION value="Traditional">Traditional</OPTION>
</SELECT>

<INPUT type="button" name="step3" value="Step 3 ..." onClick="checkMenuSelection ()">

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

function checkMenuSelection ()
{
if (document.myForm.reasonMenu.options[document.myForm.reasonMenu.selectedIndex].value)
{
var cardReason=document.myForm.reasonMenu.options[document.myForm.reasonMenu.selectedIndex].value;
if (cardReason!="")
{
// FOR TESTING PURPOSES
// alert(cardReason);
}
}

if (document.myForm.typeMenu.options[document.myForm.typeMenu.selectedIndex].value)
{
var cardType=document.myForm.typeMenu.options[document.myForm.typeMenu.selectedIndex].value;
if (cardType!="")
{
// FOR TESTING PURPOSES
// alert(cardType);
}
}

window.location="wait.htm";
}
</SCRIPT >

Many thanks for your help.
Andy:thumbsup: