Javascript: campi dinamici mediante innerHTML

Recentemente mi è capitato di dover creare un form in cui inserire più campi di tipo select. Fin qui tutto facile, se non fosse per il fatto che a parte il primo, tutti gli altri campi di questo tipo devono essere “a comparsa”. Per di più, l’unica discriminante in base alla quale viene deciso quale select inserire dinamicamente, si fonda solo ed esclusivamente sull’opzione scelta dall’utente nell’ambito della select immediantamente precedente.

javascript.jpg

 

Ma bando alle ciance, ecco il codice:

function dinamica() {
var tipologia = document.getElementById("tipologia");
if(tipologia.selectedIndex == 1)
{
document.getElementById('parah').innerHTML = "<br><strong>tipo entrata (*): </strong>
<select class='bordo' name='tipoentrata' id='tipoentrata' tabindex='3'>
<option>Seleziona tipo entrata</option>
<option>Finanziamenti</option>
<option>Biglietteria</option>
<option>Servizi</option>
<option>Banche</option>
</select>";
}
else if(tipologia.selectedIndex == 2)
{
document.getElementById('parah').innerHTML = "<br><strong>tipo uscita (*): </strong>
<select class='bordo' name='tipouscita' id='tipouscita' tabindex='3' onchange='javascrip:dinamica()'>
<option>Seleziona tipouscita</option>
<option>Cassa</option>
<option>Banca</option>
<option>Effetti</option>
</select>";
}
else if(tipologia.selectedIndex == 3)
{
document.getElementById('parah').innerHTML = "<br><strong>mastro impegno (*): </strong>
<select class='bordo' name='mastroimpegno' id='mastroimpegno' tabindex='3'>
<option>Seleziona mastro</option>
<?php while($riga = $risultato_mastro_impegno_di_spesa -> fetch_assoc()){?>
<option><?php echo $riga["Nome"]?></option>
<?php } ?>
</select>";
}
}

In particolare, mi sono avvalso dell’innerHTML per inserire stralci di codice HTML in punti ben precisi della pagina, identificati mediante il termine parah.

Se avete qualche dubbio chiedete pure.

A presto.

Javascript: campi dinamici mediante innerHTMLultima modifica: 2011-03-08T10:39:36+01:00da nazarenolatella
Reposta per primo quest’articolo

Lascia un commento