visualizzare o nascondere dinamicamente componenti di un form

**micdas** · 20-08-2009, 18:27

Ciao,

questa volta avrei un problema che penso di risolvere con JS.
Comincerei col mostrare qui il mio modellino nel quale descrivo anche la struttura del form.
Per fare questo ho usato lo script che ho trovato qui

Quel che si dovrebbe ottenere è che scegliendo dalla select alcune voci ("settore 1" o "settore 2") si dovrebbe aprire un div per mostrare dei campi aggiuntivi, scegliendo altre voci ("settore 3" o "settore 4") si dovrebbe aprire un altro divi per mostrare un'altra serie di campi aggiuntivi.
Alla scelta di altre voci non dovrebbe succedere nulla, se non, eventualmente chiudere il div eventualmente aperto.
In ogni caso dovrebbe essere visualizzato l'uno o l'altro gruppo di campi aggiuntivi, mai entrambi.

Vi ringrazio se mi aiuterete a risolvere questo problema.

**micdas** · 22-08-2009, 14:12

**cavicchiandrea** · 22-08-2009, 14:50

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form va e vieni</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function Attiva(sel){
if(sel.options[sel.selectedIndex].value=='sett 1' || sel.options[sel.selectedIndex].value=='sett 2'){
document.getElementById('sel1').style.display='block';
document.getElementById('sel2').style.display='none';
}else if(sel.options[sel.selectedIndex].value=='sett 3' || sel.options[sel.selectedIndex].value=='sett 4'){
document.getElementById('sel2').style.display='block';
document.getElementById('sel1').style.display='none';
}else{
document.getElementById('sel1').style.display='none';
document.getElementById('sel2').style.display='none';
}
}
</script>
<style type="text/css">
#sel1, #sel2{
	display: none;
}
</style>
</head>

<body bgcolor="#8692A5">
<h2>Il form di prova</h2>
<form name="modulo" method="post" action="">

<table width="100%" border="0" cellpadding="2" cellspacing="0" bgcolor="#8692A5">
<tr valign="top">
 <td width="31%">Nome</td>
 <td width="69%"><input type="text" name="FieldData0" size="30"> </td>
 </tr>

<tr valign="top">
 <td>Cognome</td>
 <td><input type="text" name="FieldData1" size="30"> </td>
 </tr>

<tr valign="top">
 <td>Citt&agrave;</td>
 <td><input type="text" name="FieldData2" size="30"> </td>
 </tr>

<tr valign="top">
 <td>Settori</td>
 <td>
<select name="trasfer" id="trasfert" onchange="Attiva(this)">
<option value="">==</option>
<option value="sett 1">Settore 1</option>
<option value="sett 2">settore 2</option>
<option value="varie 1">Varie 1</option>

<option value="varie 2">Varie 2</option>
<option value="sett 3">Settore 3</option>
<option value="sett 4">Settore 4</option>
<option value="varie 3">Varie 3</option>
<option value="varie 4">Varie 4</option>
</select>
qui le scelte da 

effettuare per mostrare o
 
nascondere i campi aggiuntivi </td>
 </tr>

<tr valign="top">
 <td>Nazione</td>
 <td><input type="text" name="FieldData3" size="30"> </td>
 </tr>

<tr valign="top">
 <td>Azienda</td>

 <td><input type="text" name="FieldData4" size="30"> </td>
 </tr>

<tr valign="top">
 <td colspan="2">
	<table width="100%" id="sel1">
	<tr>
	<td width="31%">nome</td>

	<td width="69%"><input type="text" name="textfield" id="textfield"></td>
	</tr>
	<tr>
	<td>cognome</td>
	<td><input type="text" name="textfield2" id="textfield2"></td>
	</tr>
	<tr>
	<td>città</td>

	<td><input type="text" name="textfield3" id="textfield3"></td>
	</tr>
	</table>
	<table width="100%" id="sel2">
	<tr>
	<td width="31%">nome e cognome</td>

	<td width="69%"><input type="text" name="textfield4" id="textfield4"></td>
	</tr>
	<tr>
	<td>città</td>
	<td><input type="text" name="textfield5" id="textfield5"></td>
	</tr>
	<tr>
	<td>indirizzo</td>

	<td><input type="text" name="textfield6" id="textfield6"></td>
	</tr>
	<tr>
	<td>CAP</td>
	<td><input type="text" name="textfield7" id="textfield7"></td>
	</tr>
	<tr>
	<td>provincia</td>

	<td><input type="text" name="textfield8" id="textfield8"></td>
	</tr>
	</table>
    </td>
 </tr>

<tr valign="top">
 <td>Indirizzo eMail</td>
 <td><input type="text" name="FieldData5" size="30"> </td>
 </tr>

<tr valign="top">
 <td>Telefono</td>
 <td><input type="text" name="FieldData6" size="30"> </td>
 </tr>

<tr valign="top">
 <td>Fax</td>
 <td><input type="text" name="FieldData7" size="30"> </td>
 </tr>
<tr>
 <td colspan="2"></td>
 </tr>
<tr>
<td align="right" colspan=2 >
<input type="text" name="hida2" value="" maxlength="100" size="3">
<input type="submit" class="btn" value="Invia" name="Submit">  <input type="reset" class="btn" value="  Azzera  " name="Clear"></td>
</tr>
<tr>
<td colspan=2 align="center"></td></tr>
</table>
</form>


</p>


</p>
</body>
</html>

**micdas** · 22-08-2009, 21:34

Grazie cavicchiandrea

non avevo dubbi di trovare la soluzione.
Siccome lo script originale potrebbe servirmi per altri applicativi ho provato con questo file modificato
Grazie ancora e alla prossima

Discussione: visualizzare o nascondere dinamicamente componenti di un form

Strumenti discussione

Ricerca discussione

Visualizza

visualizzare o nascondere dinamicamente componenti di un form

Permessi di invio