In molti casi risulta necessario creare un modulo di immissione dati che si adatti alle diverse scelte dell’utente. In altri termini vorremmo poter aggiungere ad esempio un campo di testo qualora l’utente selezioni una particolare voce o semplicemente in relazione ad un input precedentemente inserito.
Un classico esempio a chiarire le idee è un form che visualizzando un importo(in euro ad esempio) permetta all’utente di scegliere il numero di rate per cui dilazionare la somma. In questo caso vorremmo che il nostro form sia il più dinamico possibile, inserendo un numero di righe pari al numero di rate scelte.

In fondo all’articolo è possibile testare e scaricare lo script completo con due differenti esempi.

Vediamo innanzitutto la funzione Javascript che aggiunge elementi al form:

<script type='text/javascript'>
// Funzione che permette di aggiungere elementi al form (in questo caso rate)
function AggiungiRata(rate){
	var numero_rate = rate.value;
	var box = document.getElementById('box_rate');
	if(numero_rate==""){
		box.innerHTML='';
	}else{
		if(isNaN(numero_rate)==true){
			box.innerHTML='';
		}else{
			var righe = "";
			var importo = (parseInt(document.form.importo.value)/parseInt(numero_rate));
			// Inserisco una riga ad ogni ciclo
			for(i=1; i<=numero_rate; i++){
				righe = righe + "Rata n°"+i+" : <input type='text' name='rata"+i+" size='10' value='"+importo+"' maxlength='10'/><br/>";
			}
			// Aggiorno il contenuto del box che conterrà gli elementi aggiunti
			box.innerHTML=righe;
		}
	}
}
</script>

La funzione prende come input l’oggetto contenete il numero di rate. Dopo averne controllato la validità aggiorna un box html(box_rate) con una stringa(righe) precedentemente composta all’interno di un ciclo for. Ad ogni passo del ciclo viene aggiunto un campo di input utilizzando la corretta formattazione html.

Per completare lo script vediamo il codice html della form:

<form method="post" action="#" name="form">
<table border="0">
<tr><td>Euro : </td><td><input type='text' name='importo' value="0" maxlength="10" /></td></tr>
<tr><td>Numero di rate : </td><td><input type="text" name="rate" maxlength="2" onkeyup="AggiungiRata(this)"/></td></tr>
</table>

<span id='box_rate'>
<!-- Box che conterrà le righe aggiunte. Inizialmente vuoto! -->
</span>
</form>

La funzione AggiungiRata viene richiamata ad ogni inserimento di caratteri all’interno del campo di testo rate. Il box che conterrà gli elementi aggiunti sarà inizialmente vuoto; per ogni riga aggiunta la funzione immetterà di defaul l’importo della rata.
Possiamo concludere sintetizzando la porzione di codice che permette di inserire un campo di input in un modulo:

// Creo una stringa contenente codice HTML
var riga = "Campo aggiunto : <input type='text' name='campo_aggiunto' size='10' />";
// Imposto come contenuto del box_html il codice della variabile riga
document.getElementById('box_html').innerHTML = riga;

L’esempio appena descritto è solo un ipotetico caso in cui risulta necessario aggiungere elementi ad una form.

Prova lo script cliccando qui.
Oppure scaricalo da qui.