problema con 2 tendine

[dydale]

Ho bisogno di aiuto per un form.
Devo inserire 2 menu a tendina per selezionare un elenco di prodotti. Vorrei che la lista nel secondo menu cambiasse a seconda di quanto selezionato nella prima. Ho 3 categorie e 6 prodotti: se seleziono la categoria 1, nel secondo menu dovrebbero comparire solo i prodotti A e B, se seleziono la categoria 2 solo i prodotti C e D,...

Inoltre vorrei che la scelta di una voce di entrambe le tendine fosse obbligatoria.

Grazie

Alessandro


--- Allego il codice ---

<script language="javascript">
<!--
function Modulo() {
var Last_Name = document.modulo.Last_Name.value;
var First_Name = document.modulo.First_Name.value;
var Company = document.modulo.Company.value;
var Street = document.modulo.Street.value;
var City = document.modulo.City.value;
var Select1 = document.modulo.Select1.options[document.modulo.Select1.selectedIndex].value;
var State = document.modulo.State.value;
var Phone_Number = document.modulo.Phone_Number.value;
var Fax_Number = document.modulo.Fax_Number.value;
var Email_Address = document.modulo.Email_Address.value;
var email_reg_exp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]{2,})+\.)+([a-zA-Z0-9]{2,})+$/;
if ((Last_Name == "") || (Last_Name == "undefined")) {
alert("Il campo Cognome è obbligatorio.");
document.modulo.Last_Name.focus();
return false;
}
else if ((First_Name == "") || (First_Name == "undefined")) {
alert("Il campo Nome è obbligatorio.");
document.modulo.First_Name.focus();
return false;
}
else if ((Street == "") || (Street == "undefined")) {
alert("Il campo Indirizzo è obbligatorio.");
document.modulo.Street.focus();
return false;
}
else if ((City == "") || (City == "undefined")) {
alert("Il campo Città è obbligatorio.");
document.modulo.City.focus();
return false;
}
else if ((isNaN(Phone_Number)) || (Phone_Number == "") || (Phone_Number == "undefined")) {
alert("Il campo Telefono è numerico ed obbligatorio.");
document.modulo.Phone_Number.value = "";
document.modulo.Phone_Number.focus();
return false;
}
else if (!email_reg_exp.test(Email_Address) || (Email_Address == "") || (Email_Address == "undefined")) {
alert("Inserire un indirizzo email corretto.");
document.modulo.Email_Address.select();
return false;
}
else if ((Select1 == "") || (Select1 == "undefined")) {
alert("Per favore seleziona la categoria.");
document.modulo.Selecet1.focus();
return false;
}

else {
document.modulo.action = "form.asp";
document.modulo.submit();
}
}

function toggleMenus(clickSource) {
if (clickSource != "SELECT1")
document.contactform.SELECT1.selectedIndex = 0;

return true;
}

function checkContactForm (strFile)
{
if(!checkContactFields(strFile))
alert("Per favore riempire tutti i campi contrassegnati con un asterisco \(*\).");
else if((document.contactform.SELECT1.value == "1") ^
(document.contactform.SELECT1.value == "2") ^
(document.contactform.SELECT1.value == "3"))
alert("Per favore scegliere un argomento");
else
{
document.contactform.submit();
}

}

//-->
</script>
<table align="center" border="0" width=100%>
<form method="POST" action="form.asp" onsubmit="return modulo_Validator(this)" name="modulo">
<input type="hidden" name="thengoto" value="ok.htm" target="_blank">
<input type="hidden" name="goifnofrom" value="fallito.htm" target="_blank">


<tr>
<td width=230>Cognome*</td>
<td width="190">
<input type="text" name="Last_Name" class="txt"></td>
</tr>
<tr>
<td width="230">Nome*</td>
<td width="190">
<input type="text" name="First_Name" class="txt"></td>
</tr>
<tr>
<td width="230">Azienda</td>
<td width="190">
<input type="text" name="Company" class="txt"></td>
</tr>
<tr>
<td width="230">Indirizzo*</td>
<td width="190">
<input type="text" name="Street" class="txt"></td>
</tr>
<tr>
<td width="230">Città*</td>
<td width="190">
<input type="text" name="City" class="txt"></td>
</tr>
<tr>
<td width="230">Provincia</td>
<td width="190">
<input type="text" name="State" class="txt"></td>
</tr>
<tr>
<td width="230">Telefono (senza spazi nè simboli)*</td>
<td width="190">
<input type="text" name="Phone_Number" class="txt"></td>
</tr>
<tr>
<td width="230">Fax (senza spazi nè simboli)</td>
<td width="190">
<input type="text" name="Fax_Number" class="txt"></td>
</tr>
<tr>
<td width="230">Email*</td>
<td width="190">
<input type="text" name="Email_Address" class="txt"></td>
</tr>

<TR>

<TD width="230">Seleziona prodotto*:</TD>

<TD width="190">
<select name="Select1" class="txt">
<option value="" selected>- Seleziona -</option>
<option value="1">Categoria 1</option>
<option value="2">Categoria 2</option>
<option value="3">Categoria 3</option>
</select>


<select name="Select2" class="txt">
<option value="" selected>- Seleziona -</option>
<option value="A">Prodotto A (cat. 1)</option>
<option value="B">Prodotto B (cat. 1)</option>
<option value="C">Prodotto C (cat. 2)</option>
<option value="D">Prodotto D (cat. 2)</option>
<option value="E">Prodotto E (cat. 3)</option>
<option value="F">Prodotto F (cat. 3)</option>

</select>


</td> </TR>



<tr>
<td colspan="2" align="center">
<input type="button" class="txt" value="Invia" onClick="Modulo()">
<input type="reset" class="txt" value="Cancella">

</td>
</tr>
</form>
</table>

[var]

prova leggendo la mia pillola sull'argomento.

ciao

[dydale]

Grazie per la risposta, ma non sono riuscito a risolvere il problema.

Come avrai capito non capisco molto di javascript.
Ho copiato il tuo script alla fine delle variabili, la parte del "select" al posto dei 2 select che avevo messo, ma non funziona. Mi dà un errore di javascript nel momento in cui seleziono una delle 2 voci della tendina (siti italiani o siti inglesi), non mi compare una seconda tendina e non funzionano più i controlli sui campi obbligatori.

Cosa ho sbagliato?

Grazie

Alessandro