|
|
|
|
Form gestire inserimento dati
|
|
|
Un articolo di: Massimo Giari
del 12/05/2003
Letture: 18029
|
|
|
 Buono sconto 4% su Toner e Cartucce agli utenti AZpoint. SU Iomiricarico.it!!
Questo esempio controlla se nel campo richiesto viene scritto qualcosa.
JavaScript è usato molto per la gestione dei moduli, qualsiasi richiesta
non conforme a quella del form viene bloccata e un messaggio di alert
avvisa l'utente dell'errato inserimento dei dati.
L'esempio controlla se nel modulo viene inserito almeno un carattere
però accetta qualsiasi carattere dalla tastiera, compreso la barra spaziatrice
comunque può considerarsi un buon inizio per capirne il funzionamento,
come usare gli operatori di assegnazione, le condizioni di controllo e l'uso dei blocchi d'istruzione.
Creo fa funzione assegnandoli un nome, in questo esempio controlla.
function controlla() le funzioni in JavaScript sono la base per la creazione di gestori degli eventi.
La funzione viene scritta in questo modo:
funzione nome funzione(){
........
}
Creo una variabile chiamandola f, con l'operatore di assegnazione =, var f = document.mioform;
il . è un separatore separa un'oggetto da un metodo. Ogni volta che verrà effettuata una chiamata alla
variabile f verrà fatto riferimento al nome dato al name del tag <form> che deve essere uguale al nome assegnato al metodo
.mioform <form name="mioform">
Adesso creo la condizione di controllo sul campo name del modulo con la dichiarazione if
Letterali booleani
I letterali booleani hanno due stati, vero e falso, che sono rappresentati dalle parole chiave true e false: Questo valore rappresenta
lo stato di un elemento che può assumere uno solo dei due valori. I valori sono tipicamente utilizzati come flag per la determinazione di una determinata azione o no;
il valore booleano è un vero letterale. La dichiarazione if verifica la variabile racchiusa tra le perentesi per controllare se è true o false. Se la variabile è true
esegue le dichiarazioni tra le perentesi graffe.
if (f.nome.value == "" ){
Inizio condizione di controllo sul campo richiesto, tra le parentesi tonde è inserita la lettera f
per richiamare l'oggetto document e il metodo, che in questo esempio è il nome dato al tag <form>
assegnare una variabile all'oggetto che fa riferimento al form non è strettamente necessario, tuttavia evita di
dover ripetere righe di codice dovendo richiamare per ogni funzione di controllo l'oggetto document.metodo
if (document.mioform.nome.value == "" ){
Lo scritto sopra ha lo stesso effetto di if (f.nome.value == "" ){ togliendo dallo script la variabile
var f = document.mioform; se le condizioni di controllo sui campi: text, textarea radio, option e checkbox sono molte, questa evita
molto scritto in quanto siamo costretti a richiamare per ogni singola funzione di controllo l'oggetto document.metodo.
dopo la variabile f separatao dal . inserisco il nome (name) del campo da controllare (f.nome
dopo (f.nome inserisco il .value questa proprietà contiene il valore del campo richiesto (nome)
ed è equivalente all'attributo value tel tag HTML, == uguale a, è un intero relazionale che produce un risultato booleano
"" due doppi apici senza lasciare spazio. Se nel campo nome non viene scritto niente avendo una richiesta di un campo value
nella condizione if, il risultato booleano è vero vengono eseguite tutte le istruzioni inserite tra le parentesi graffe.
Messaggio di alert invitando l'utente a scrivere quello che viene richiesto nel campo.
f.nome.focus(); focus(), questo gestore di eventi attiva il focus nel campo dove deve scrivere
in pratica porta il cursore nel campo senza che l'utente debba farlo manualmente.
Questa funzione possiamo attivarla all'apertura della pagina, (attivare il focus()) avere il campo già pronto per scrivere
senza doverlo fare manualmente inserendo la richiesta di attivazione del focus nel tag <body> con il gestore di eventi onLoad
<body onLoad="document.mioform.nome.focus()">
return false; La dichiarazione return in una funzione viene utilizzata per restituire i valori alla dichiarazione che ha chiamato la funzione
Se l'utente non ha scritto niente, la condizione di controllo sul campo richiesto viene rieseguita.
Per richiamare la funzione di controllo inseriamo il gestore di evento onSubmit nel tag <form> alla fine dello stesso.
<form name="mioform" action="" method="" onSubmit="return controlla()">
<script language="JavaScript">
<!--
function controlla() {
var f = document.mioform;
if (f.nome.value == ""){
alert("Scrivi il tuo Nome !");
f.nome.focus();
return false;
}
}
// -->
</script>
</head>
<body>
<form name="mioform" onSubmit="return controlla()">
Scrivi il tuo Nome:<br>
<input type="text" name="nome">
<br><br>
<input type="submit" value=" Invia ">
<input type="reset" value="Cancella">
</form>
Nei prossimi script analizzeremo altre proprietà in Javascript per la gestione dei moduli
Giari Massimo
|
|
[Indietro]
[Su]
[Home]
[Commenti]
[V. Stampabile]
|
|
|
|
Commento di Anonimo (ip: 82.49.175.246), scritto il 01/01/2005 alle 13:17:30
|
|
Commento di Anonimo (ip: 82.49.175.246), scritto il 01/01/2005 alle 13:17:41
|
|
Commento di Anonimo (ip: 81.211.171.89), scritto il 07/02/2005 alle 22:51:57
|
|
Commento di Anonimo (ip: 82.107.77.175), scritto il 12/04/2005 alle 16:55:18
|
|
Commento di Anonimo (ip: 82.49.154.16), scritto il 21/05/2005 alle 23:48:08
|
|
Commento di Anonimo (ip: 81.174.23.162), scritto il 08/09/2005 alle 09:43:52
|
|
Commento di Anonimo (ip: 82.59.93.86), scritto il 25/12/2005 alle 12:20:19
|
|
Commento di Anonimo (ip: 82.50.98.37), scritto il 22/02/2006 alle 18:41:10
|
|
Commento di Anonimo (ip: 83.225.78.210), scritto il 02/03/2006 alle 15:44:54
|
|
Commento di Anonimo (ip: 83.225.78.210), scritto il 02/03/2006 alle 15:45:27
|
|
Commento di Anonimo (ip: 83.225.78.210), scritto il 02/03/2006 alle 15:45:47
|
|
Commento di Anonimo (ip: 87.11.159.143), scritto il 23/04/2006 alle 14:23:10
|
|
Commento di Anonimo (ip: 82.56.21.136), scritto il 25/04/2006 alle 14:44:03
|
|
Commento di Anonimo (ip: 66.98.168.100), scritto il 11/05/2006 alle 14:48:40
|
|
Commento di Anonimo (ip: 207.44.134.33), scritto il 11/05/2006 alle 15:46:06
|
|
Commento di Anonimo (ip: 216.12.200.106), scritto il 12/05/2006 alle 00:06:33
|
|
Commento di Anonimo (ip: 66.135.34.11), scritto il 23/05/2006 alle 22:13:47
|
|
Commento di Anonimo (ip: 196.40.43.78), scritto il 30/05/2006 alle 09:59:05
|
|
Commento di Anonimo (ip: 196.40.43.218), scritto il 30/05/2006 alle 10:36:08
|
|
Commento di Anonimo (ip: 208.104.161.157), scritto il 03/06/2006 alle 13:45:33
|
|
Commento di Anonimo (ip: 62.101.98.215), scritto il 23/06/2006 alle 15:13:33
|
|
Commento di Anonimo (ip: 217.11.92.34), scritto il 27/06/2006 alle 11:29:42
|
|
Commento di Anonimo (ip: 87.3.78.49), scritto il 17/02/2007 alle 20:14:16
|
|
Commento di Anonimo (ip: 80.104.208.81), scritto il 31/07/2007 alle 15:57:23
|
|
Commento di Anonimo (ip: 88.44.207.42), scritto il 04/08/2007 alle 12:08:52
|
|
Commento di Anonimo (ip: 194.243.137.88), scritto il 29/01/2008 alle 12:35:00
|
|
|
|
Shopping
