Ciao a tutti,
non riesco proprio a far funzionare la funzione document.getElementById("").style.display con i radio...
ecco l'HTML della form:
<div class="form_item"> <div class="form_element cf_heading"> <h1 class="cf_text">PREVENTIVO ONLINE</h1> </div> <div class="cfclear"> </div></div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">QUANTITA'</label>
<input class="cf_inputbox required validate-number" maxlength="3" size="2" title="Inserire le quantità desiderate" id="qta" name="qta" type="text" onChange="updatethis(this.form);" value="" />
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">QUANTITA' :: N.B. INSERIRE LE QUANTITA' DESIDERATE</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">SELEZIONA COLORE</label>
<select class="cf_inputbox validate-selection" id="color" size="1" title="" name="colore" onChange="updatethis(this.form);">
<option value="">- Seleziona colore -</option>
<option value="ral">COLORI RAL BASE</option>
<option value="raffaello">COLORI RAFFAELLO</option>
<option value="legno">COLORI LEGNO</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#imgPreviewWithStyles,
#imgPreviewWithStyles2,
#imgPreviewWithStyles3 {
background: #222 url(loading.gif) no-repeat center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 15px;
z-index: 999;
border: none;
}
#imgPreviewWithStyles span,
#imgPreviewWithStyles2 span,
#imgPreviewWithStyles3 span {
color: white;
font-size: 1em;
text-align: center;
display: block;
padding: 10px 0 3px 0;
}
.loading {
height: 32px;
width: 32px;
}
</style>
</head>
<body>
<table>
<tr>
<td width="100">
<div id="variabile1" style="display: none;">
<input value="9010" title="RAL 9010 bianco ghiaccio" class="radio validate-one-required" id="RAL_9010" name="standard" type="radio" onChange="updatethis(this.form);">
<label for="RAL_9010" class="radio_label">RAL 9010<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/9010.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/9010.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile1" style="display: none;">
<input value="1013" title="RAL 1013 bianco avorio" class="radio validate-one-required" id="RAL_1013" name="standard" type="radio" onChange="updatethis(this.form);">
<label for="RAL_1013" class="radio_label">RAL 1013<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/1013.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/1013.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile1" style="display: none;">
<input value="3003" title="RAL 3003 Rosso" class="radio validate-one-required" id="RAL_3003" name="standard" type="radio" onChange="updatethis(this.form);">
<label for="RAL_3003" class="radio_label">RAL 3003<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/3003.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/3003.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile1" style="display: none;">
<input value="6005" title="RAL 6005 verde" class="radio validate-one-required" id="RAL_6005" name="standard" type="radio" onChange="updatethis(this.form);">
<label for="RAL_6005" class="radio_label">RAL 6005<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/6005.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/6005.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile1" style="display: none;">
<input value="8017" title="RAL 8017 marrone" class="radio validate-one-required" id="RAL_8017" name="standard" type="radio" onChange="updatethis(this.form);">
<label for="RAL_8017" class="radio_label">RAL 8017<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/8017.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/8017.bmp" border="2"></a></ul></label>
<br /></div>
</td>
</tr>
<tr>
<td width="100">
<div id="variabile1" style="display: none;">
<input value="ARGENTO" title="ARGENTO" class="radio validate-one-required" id="ARGENTO" name="standard" type="radio" onChange="updatethis(this.form);">
<label for="ARGENTO" class="radio_label">ARGENTO<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/ARGENTO.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/ARGENTO.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile1" style="display: none;">
<input value="BRONZO" title="BRONZO" class="radio validate-one-required" id="BRONZO" name="standard" type="radio" onChange="updatethis(this.form);">
<label for="BRONZO" class="radio_label">BRONZO<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/BRONZO.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/BRONZO.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile1" style="display: none;">
<input value="NERO_ELETTROCOLORE" title="NERO ELETTROCOLORE" class="radio validate-one-required" id="NERO_ELETTROCOLORE" name="standard" type="radio" onChange="updatethis(this.form);">
<label for="NERO_ELETTROCOLORE" class="radio_label">Nero elox<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/NERO_ELETTROCOLORE.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/NERO_ELETTROCOLORE.bmp" border="2"></a></ul></label>
<br /></div>
</td>
</tr>
<tr>
<td width="100">
<div id="variabile2" style="display: none;">
<input value="GRIGIO_PG_RAFF" title="GRIGIO PG RAFFAELLO" class="radio validate-one-required" id="GRIGIO_PG_RAFF" name="raffaello" type="radio" onChange="updatethis(this.form);">
<label for="GRIGIO_PG_RAFF" class="radio_label">Grigio Raff.<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/GRIGIO_PG_RAFF.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/GRIGIO_PG_RAFF.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile2" style="display: none;">
<input value="VERDE_PV_RAFF" title="VERDE PV RAFFAELLO" class="radio validate-one-required" id="VERDE_PV_RAFF" name="raffaello" type="radio" onChange="updatethis(this.form);">
<label for="VERDE_PV_RAFF" class="radio_label">Verde Raff.<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/VERDE_PV_RAFF.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/VERDE_PV_RAFF.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile2" style="display: none;">
<input value="MARRONE_PM_RAFF" title="MARRONE PM RAFFAELLO" class="radio validate-one-required" id="MARRONE_PM_RAFF" name="raffaello" type="radio" onChange="updatethis(this.form);">
<label for="MARRONE_PM_RAFF" class="radio_label">Marrone Raff.<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/MARRONE_PM_RAFF.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/MARRONE_PM_RAFF.bmp" border="2"></a></ul></label>
<br /></div>
</td>
</tr>
<tr>
<td width="100">
<div id="variabile3" style="display: none;">
<input value="PKC5_CILIEGIO_FIAMMATO_SCURO" title="PKC5 CILIEGIO FIAMMATO SCURO" class="radio validate-one-required" id="PKC5_CILIEGIO_FIAMMATO_SCURO" name="legno" type="radio" onChange="updatethis(this.form);">
<label for="PKC5_CILIEGIO_FIAMMATO_SCURO" class="radio_label">Ciliegio<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/PKC5_CILIEGIO_FIAMMATO_SCURO.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/PKC5_CILIEGIO_FIAMMATO_SCURO.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile3" style="display: none;">
<input value="PKC7_CASTAGNO_ANTICO" title="PKC7 CASTAGNO ANTICO" class="radio validate-one-required" id="PKC7_CASTAGNO_ANTICO" name="legno" type="radio" onChange="updatethis(this.form);">
<label for="PKC7_CASTAGNO_ANTICO" class="radio_label">Castagno<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/PKC7_CASTAGNO_ANTICO.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/PKC7_CASTAGNO_ANTICO.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile3" style="display: none;">
<input value="PKD1_DOUGLAS" title="PKD1 DOUGLAS" class="radio validate-one-required" id="PKD1_DOUGLAS" name="legno" type="radio" onChange="updatethis(this.form);">
<label for="PKD1_DOUGLAS" class="radio_label">Douglas<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/PKD1_DOUGLAS.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/PKD1_DOUGLAS.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile3" style="display: none;">
<input value="PKM2_MOGANO" title="PKM2 MOGANO" class="radio validate-one-required" id="PKM2_MOGANO" name="legno" type="radio" onChange="updatethis(this.form);">
<label for="PKM2_MOGANO" class="radio_label">Mogano<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/PKM2_MOGANO.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/PKM2_MOGANO.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile3" style="display: none;">
<input value="PKN1_NOCE_CHIARA" title="PKN1 NOCE CHIARA" class="radio validate-one-required" id="PKN1_NOCE_CHIARA" name="legno" type="radio" onChange="updatethis(this.form);">
<label for="PKN1_NOCE_CHIARA" class="radio_label">Noce chiaro<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/PKN1_NOCE_CHIARA.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/PKN1_NOCE_CHIARA.bmp" border="2"></a></ul></label>
<br /></div>
</td>
</tr>
<tr>
<td width="100">
<div id="variabile3" style="display: none;">
<input value="PKN3_NOCE_MEDIA" title="PKN3 NOCE MEDIA" class="radio validate-one-required" id="PKN3_NOCE_MEDIA" name="legno" type="radio" onChange="updatethis(this.form);">
<label for="PKN3_NOCE_MEDIA" class="radio_label">Noce medio<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/PKN3_NOCE_MEDIA.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/PKN3_NOCE_MEDIA.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile3" style="display: none;">
<input value="PKN7_NOCE_VERDE" title="PKN7 NOCE VERDE" class="radio validate-one-required" id="PKN7_NOCE_VERDE" name="legno" type="radio" onChange="updatethis(this.form);">
<label for="PKN7_NOCE_VERDE" class="radio_label">Noce verde<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/PKN7_NOCE_VERDE.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/PKN7_NOCE_VERDE.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile3" style="display: none;">
<input value="PKP2_PINO_MEDIO" title="PKP2 PINO MEDIO" class="radio validate-one-required" id="PKP2_PINO_MEDIO" name="legno" type="radio" onChange="updatethis(this.form);">
<label for="PKP2_PINO_MEDIO" class="radio_label">Pino medio<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/PKP2_PINO_MEDIO.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/PKP2_PINO_MEDIO.bmp" border="2"></a></ul></label>
<br /></div>
</td>
<td width="100">
<div id="variabile3" style="display: none;">
<input value="PKR1_ROVERE" title="PKR1 ROVERE" class="radio validate-one-required" id="PKR1_ROVERE" name="legno" type="radio" onChange="updatethis(this.form);">
<label for="PKR1_ROVERE" class="radio_label">Rovere<ul id="third">
<a href="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz/PKR1_ROVERE.bmp" target="img">
<img src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/colori/colori_zanz_s/PKR1_ROVERE.bmp" border="2"></a></ul></label>
<br /></div>
<div class="cfclear"> </div>
</div>
</td>
</tr>
</table>
</script>
</body>
</html>
<script src="http://www.el-shaddai-tv.net/FER.ALL.PLAST/imgpreview.full.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($){
$('ul#third a').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 200
},
// When container is shown:
onShow: function(link){
// Animate link:
$(link).stop().animate({opacity:0.4});
// Reset image:
$('img', this).css({opacity:0});
},
// When image has loaded:
onLoad: function(){
// Animate image
$(this).animate({opacity:1}, 300);
},
// When container hides:
onHide: function(link){
// Animate link:
$(link).stop().animate({opacity:1});
}
});
})(jQuery);
//]]>
</script>
</body>
</html>
</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">TIPOLOGIA</label>
<select class="cf_inputbox validate-selection" id="TIPOLOGIA" size="1" title="Seleziona la tipologia" name="tipologia">
<option value="B1A">Battente 1 anta</option>
<option value="B2A">Battente 2 ante</option>
<option value="B3A">Battente 3 ante</option>
<option value="FUG1A">Battente 1 anta con fuga</option>
<option value="FUG2A">Battente 2 ante con fuga</option>
<option value="FUG3A">Battente 3 ante con fuga</option>
<option value="ARC1A">Battente 1 anta ad arco</option>
<option value="ARC2A">Battente 2 ante ad arco</option>
<option value="ARC3A">Battente 3 ante ad arco</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">APERTURA (vista interna)</label>
<select class="cf_inputbox validate-selection" id="APERTURA" size="1" title="Seleziona tipo apertura" name="apertura">
<option value="VistaInterna_spingere_DX">SPINGERE DX</option>
<option value="VistaInterna_spingere_SX">SPINGERE SX</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">TIPO DI RETE</label>
<select class="cf_inputbox validate-selection" id="RETE" size="1" title="Seleziona tipo di rete" name="rete">
<option value="retefibradivetro">Rete in fibra di vetro</option>
<option value="retemetallica">Rete Metallica + 5%</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">TIPO TELAIO</label>
<select class="cf_inputbox validate-selection" id="TELAIO" size="1" title="Seleziona tipo telaio" name="telaio">
<option value="telaioZ">Telaio a Z</option>
<option value="telaioL">Telaio a L</option>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">TIPO MISURA</label>
<select class="cf_inputbox validate-selection" id="MISURA" size="1" title="Seleziona tipo misura" name="misura">
<option value="misurafinita">Misura Finita</option>
<option value="misuravano">Misura Vano</option>
</select>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">MISURA :: <b>Misura Finita:</b> La zanzariera verrà fornita con le stesse misure ordinate<br>
<b>Misura Vano:</b> La zanzariera verrà fornita con 2-4 mm in meno rispetto alla luce del vano
</div>
</div>
<div class="cfclear"> </div>
</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">LARGHEZZA IN CM</label>
<input class="cf_inputbox required validate-number" maxlength="3" size="2" title="Inserire la larghezza in cm" id="larghezza" name="larghezza" type="text" onChange="updatethis(this.form);" value="" />
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">LARGHEZZA IN CM :: N.B. INSERIRE LA LARGHEZZA IN CM</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">ALTEZZA IN CM</label>
<input class="cf_inputbox required validate-number" maxlength="3" size="2" title="Inserire l'altezza in cm" id="ALTEZZA" name="altezza" type="text" onChange="updatethis(this.form);" value="" />
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">ALTEZZA IN CM :: N.B. INSERIRE L'ALTEZZA IN CM</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">MQ</label>
<input class="cf_inputbox" maxlength="150" size="4" title="" id="MQ" name="mq" type="text" readonly="readonly" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">PREZZO</label>
<input class="cf_inputbox" maxlength="150" size="4" title="" id="prezzo" name="prezzo" type="text" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_button">
<input value="AGGIUNGI" name="button_11" type="submit" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">formkey</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_5" name="formkey" type="text" />
</div>
<div class="cfclear"> </div>
</div>
ecco il JAVA SCRIPT:
function updatethis(form) {
var colore = form.elements['color'].value;
if (colore=="ral") {
document.getElementById("variabile1").style.display = 'block';
document.getElementById("variabile2").style.display = 'none';
document.getElementById("variabile3").style.display = 'none';
}
else if (colore=="raffaello") {
document.getElementById("variabile2").style.display = 'block';
document.getElementById("variabile1").style.display = 'none';
document.getElementById("variabile3").style.display = 'none';
}
else if (colore=="legno") {
document.getElementById("variabile3").style.display = 'block';
document.getElementById("variabile1").style.display = 'none';
document.getElementById("variabile2").style.display = 'none';
}
}
Qualcuno può aiutarmi?!
Grazie in anticipo
vito81
