Inserire un numero variabile di campi in una form - di Eliana Argenti e Tommaso Bientinesi

NUMERO VARIABILE DI CAMPI SCELTO DALL'UTENTE

Come al solito iniziamo dalla visualizzazione dell'esempio; segue poi il codice con relativa spiegazione.

ESEMPIO

Quante persone? Inserisci il numero nella casella di testo e premi il tasto OK

Come si potrà vedere facendo una prova, la prima volta che il tasto OK viene premuto vengono aggiunti tanti campi quanti indicati nella casella di testo; la seconda volta invece si riceve un messaggio d'errore: questo per evitare errori o inutili duplicazioni nell'invio.

CODICE E SPIEGAZIONI

PASSO UNO

Inserire il seguente codice all'interno del tag <BODY> : Quante persone? Inserisci il numero nella casella di testo e premi il tasto OK <form name="form1"><input type=text name="num" size=3><input type=button name="bottone" value="OK" OnClick="javascript: prepara(document.form1.num.value)"></form> <span id="spazio"></span> Tale codice serve ad inserire nella pagina un breve commento, che naturalmente può essere cambiato, la casella di testo, il bottone OK. Una volta premuto il bottone OK viene richiamata la funzione prepara(document.form1.num.value), che sarà spiegata in seguito.
Lo span, invece, serve per poterci in seguito scrivere i campi desiderati. Uno span è in pratica una sorta di foglio trasparente che viene "incollato" sopra alla pagina di testo. All'interno dei tags <span> e </span> può essere inserito tutto quanto si trova normalmente in una pagina HTML, come testo, immagini, tabelle, marquees, collegamenti ipertestuali. Nel nostro esempio inseriremo dei campi. L'attributo id dà un nome allo span, che altrimenti non potrebbe essere richiamato, ad esempio, nei codici Javascript.

PASSO DUE

Preparare lo script, che va inserito fra i tags <HEAD> ed </HEAD> della pagina HTML: <script language="JavaScript"> Dichiarazione del fatto che si sta inserendo codice JavaScript var lista='' Si inizializza la variabile di nome lista, nella quale saranno memorizzati i tag necessari per visualizzare i campi. var volte=0 Si inizializza la variabile di nome volte, nella quale sarà memorizzato il numero di volte che è premuto il tasto OK function prepara(campi) { Dichiarazione della funzione di nome "prepara". Dentro la parentesi abbiamo scritto il parametro di nome "campi" che, come vedremo, fornirà il valore di input alla funzione stessa. La funzione è seguita dalla necessaria parentesi graffa di apertura. volte++ La variabile volte viene incrementata di 1: questo serve a memorizzare il numero di volte che l'utente preme il tasto OK. if (volte>1) window.alert('non è possibile aggiungere i campi due volte; eventualmente aggiornare la pagina') Se l'utente ha premuto il tasto OK viene aperta una finestra di avviso e si impedisce che si aggiungano nuovi campi a quelli già visualizzati. else { Altrimenti: da adesso in poi inizia il codice per l'aggiunta dei campi lista+='<form name="form2" action="Mailto:_" method=post ENCTYPE="text/plain">' Alla variabile di nome "lista" viene assegnato il codice che serve per inserire un form in una pagina web. Dopo Mailto: inserire l'inidizzo di posta elettronica del destinatario for(i=1; i<=campi; i++) { Inizio del ciclo enumerativo: il contatore i varia da uno al numero di campi introdotto dall'utente nella casella di testo; il suo incremento è di uno. lista+=' nome <input type=text name= "nome'+i+ '" size=20> cognome <input type=text name= "cognome'+i+'" size=20> indirizzo <input type=text name="indirizzo'+i+ '"size=40><br> ' La variabile lista viene incrementata di tre campi: il primo contiene il nome, il secondo il cognome ed il terzo l'indirizzo. Notare come la stringa che si aggiunge alla variabile sia composta di parti fisse e di parti variabili concatenate con il +. Ad esempio, quando i=1 la stringa diventa: 'nome <input type=text name= "nome1" size=20> cognome <input type=text name= "cognome1" size=20> indirizzo <input type=text name="indirizzo1"size=40><br>'. Dopo l'immissione dei tre campi viene inserito il tag <br> che serve per andare a capo. Con questo semplice espediente è possibile dare un nome univoco ad ogni campo. } Chiusura del ciclo enumerativo lista+='<input type="submit" name="Invia" value="INVIA"> <input type="reset" name="Cancella" value="CANCELLA"></form>' Al termine del ciclo si inseriscono i bottoni per l'invio del form o per l'eventuale cancellazione dei campi: questi elementi infatti devono essere inseriti una sola volta. if(document.all) Se document.all esiste, allora il browser è Explorer. Come è noto, il codice scritto per Explorer non è sempre compatibile con quello scritto per Netscape e dunque siamo costretti a scrivere istruzioni diverse per i due browsers. { Inizio della selezione binaria document.all('spazio').innerHTML=lista; I tag HTML saranno interpretati come codice ed inseriti nell'elemento di nome spazio attraverso il metodo innerHTML. spazio è il nome dello span che inseriremo nella pagina. } Parentesi di chiusura della selezione binaria. else if(document.getElementById){ Se invece document.getElementById esiste, allora il browser è Explorer 6 o Netscape 6 o Mozilla { Inizio della selezione binaria document.getElementById("spazio").innerHTML =lista } Cambia la sintassi, ma l'effetto è sempre quello di inserire il codice nello span di nome "spazio". Viene quindi chiusa la selezione binaria attraverso la parentesi graffa. else { alert("il tuo browser non supporta questo metodo") } Siamo all'ultima alternativa: il codice precedente non viene riconosciuto e l'utente è avvertito del malfunzionamento del metodo. } Parentesi di chiusura dell'alternativa (else) } Parentesi di chiusura della funzione prepara(campi) </script> Fine script e chiusura dell'intestazione del documento. NOTA: come in tutti gli scripts javascript, occorre fare molta attenzione alla sintassi per non generare un messaggio d'errore. In particolare, javascript distingue fra maiuscole e minuscole. webfract@tin.it ©2005 www.webfract.it

<script language="JavaScript">	Dichiarazione del fatto che si sta inserendo codice JavaScript
var lista=''	Si inizializza la variabile di nome lista, nella quale saranno memorizzati i tag necessari per visualizzare i campi.
var volte=0	Si inizializza la variabile di nome volte, nella quale sarà memorizzato il numero di volte che è premuto il tasto OK
function prepara(campi) {	Dichiarazione della funzione di nome "prepara". Dentro la parentesi abbiamo scritto il parametro di nome "campi" che, come vedremo, fornirà il valore di input alla funzione stessa. La funzione è seguita dalla necessaria parentesi graffa di apertura.
volte++	La variabile volte viene incrementata di 1: questo serve a memorizzare il numero di volte che l'utente preme il tasto OK.
if (volte>1) window.alert('non è possibile aggiungere i campi due volte; eventualmente aggiornare la pagina')	Se l'utente ha premuto il tasto OK viene aperta una finestra di avviso e si impedisce che si aggiungano nuovi campi a quelli già visualizzati.
else {	Altrimenti: da adesso in poi inizia il codice per l'aggiunta dei campi
lista+='<form name="form2" action="Mailto:_" method=post ENCTYPE="text/plain">'	Alla variabile di nome "lista" viene assegnato il codice che serve per inserire un form in una pagina web. Dopo Mailto: inserire l'inidizzo di posta elettronica del destinatario
for(i=1; i<=campi; i++) {	Inizio del ciclo enumerativo: il contatore i varia da uno al numero di campi introdotto dall'utente nella casella di testo; il suo incremento è di uno.
lista+=' nome <input type=text name= "nome'+i+ '" size=20> cognome <input type=text name= "cognome'+i+'" size=20> indirizzo <input type=text name="indirizzo'+i+ '"size=40><br> '	La variabile lista viene incrementata di tre campi: il primo contiene il nome, il secondo il cognome ed il terzo l'indirizzo. Notare come la stringa che si aggiunge alla variabile sia composta di parti fisse e di parti variabili concatenate con il +. Ad esempio, quando i=1 la stringa diventa: 'nome <input type=text name= "nome1" size=20> cognome <input type=text name= "cognome1" size=20> indirizzo <input type=text name="indirizzo1"size=40><br>'. Dopo l'immissione dei tre campi viene inserito il tag <br> che serve per andare a capo. Con questo semplice espediente è possibile dare un nome univoco ad ogni campo.
}	Chiusura del ciclo enumerativo
lista+='<input type="submit" name="Invia" value="INVIA"> <input type="reset" name="Cancella" value="CANCELLA"></form>'	Al termine del ciclo si inseriscono i bottoni per l'invio del form o per l'eventuale cancellazione dei campi: questi elementi infatti devono essere inseriti una sola volta.
if(document.all)	Se document.all esiste, allora il browser è Explorer. Come è noto, il codice scritto per Explorer non è sempre compatibile con quello scritto per Netscape e dunque siamo costretti a scrivere istruzioni diverse per i due browsers.
{	Inizio della selezione binaria
document.all('spazio').innerHTML=lista;	I tag HTML saranno interpretati come codice ed inseriti nell'elemento di nome spazio attraverso il metodo innerHTML. spazio è il nome dello span che inseriremo nella pagina.
}	Parentesi di chiusura della selezione binaria.
else if(document.getElementById){	Se invece document.getElementById esiste, allora il browser è Explorer 6 o Netscape 6 o Mozilla
{	Inizio della selezione binaria
document.getElementById("spazio").innerHTML =lista }	Cambia la sintassi, ma l'effetto è sempre quello di inserire il codice nello span di nome "spazio". Viene quindi chiusa la selezione binaria attraverso la parentesi graffa.
else { alert("il tuo browser non supporta questo metodo") }	Siamo all'ultima alternativa: il codice precedente non viene riconosciuto e l'utente è avvertito del malfunzionamento del metodo.
}	Parentesi di chiusura dell'alternativa (else)
}	Parentesi di chiusura della funzione prepara(campi)
</script>	Fine script e chiusura dell'intestazione del documento.
NOTA: come in tutti gli scripts javascript, occorre fare molta attenzione alla sintassi per non generare un messaggio d'errore. In particolare, javascript distingue fra maiuscole e minuscole.
webfract@tin.it