Introduzione a JavaScript

Introduzione a JavaScript
Parte 7

L'inserimento di dati in una form è molto importante per certe pagine Web. L'input delle form spesso viene inviato al server per le opportune elaborazioni. Javascript consente di controllare l'input delle form prima del loro invio al server. Come prima cosa voglio mostrarvi come è possibile controllare l'input di una form, poi vedremo come è possibile ottenere l'invio di informazioni con Javascript o HTML.

Prima di tutto creeremo una piccola form. La pagina HTML conterrà due caselle di testo. L'utente dovrà scrivere il suo nome nella prima casella e l'indirizzo di e-mail nella seconda. Potete inserire qualsiasi cosa negli elementi della form, poi cliccate sul relativo pulsante. Provate anche a non inserire nulla e cliccate sul pulsante.

Inserisci il tuo nome:

Inserisci il tuo indirizzo di e-mail:

Per quanto riguarda la prima casella di testo, vedrete un messaggio di errore quando viene lasciata in bianco, mentre un qualsiasi input viene considerato valido. Naturalmente ciò non previene l'inserimento di un nome sbagliato. Il browser accetta anche numeri, quindi se inserite '17' otterrete un 'Ciao 17!'.
Il controllo della seconda casella è leggermente più sofisticato. Provate ad inserire una semplice stringa, il vostro nome per esempio. Non verrà accettato (a meno che non abbiate un @ nel vostro nome...). Il criterio di accettazione dell'input come un indirizzo di e-mail valido consiste nel verificare la presenza del simbolo @. Viene accettato anche il solo simbolo @, che non è certamente significativo. Per semplicità abbiamo deciso di controllare soltanto la presenza di @, dal momento che ogni indirizzo di e-mail in Internet contiene questo simbolo.

Come è fatto lo script che crea questa form e ne controlla l'input? Eccolo:

<html>
<head>
<script language="JavaScript">
<!--

function test1(form) {
  if (form.text1.value == "")
    alert("Inserisci una stringa, per favore!")
  else { 
   alert("Ciao "+form.text1.value+"! Inserimento dati ok!");
  }
}

function test2(form) {
  if (form.text2.value == "" || 
      form.text2.value.indexOf('@', 0) == -1) 
        alert("Indirizzo di e-mail non valido!");
  else alert("OK!");
}
// -->
</script>
</head>

<body>
<form name="first">
Inserisci il tuo nome:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Controlla" onClick="test1(this.form)">
<P>
Inserisci il tuo indirizzo di e-mail:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Controlla" onClick="test2(this.form)">
</body>

Diamo prima uno sguardo al codice HTML nel corpo del documento. Abbiamo creato due caselle di testo e due pulsanti. I pulsanti invocano le funzioni test1(...) o test2(...) in base a quale di loro viene selezionato e viene passato come argomento this.form per permetterne l'accesso ai suoi elementi.
La funzione test1(form) controlla se la stringa è vuota; questo è fatto con if (form.text1.value == "").... 'form' è la variabile a cui viene assegnato il valore 'this.form' nella chiamata di funzione. Possiamo ottenere il valore del dato inserito nella casella di testo usando 'value' in combinazione con form.text1. Per controllare se la stringa è vuota la confrontiamo con "". Se la stringa inserita è uguale a "", verrà segnalato all'utente un messaggio di errore, altrimenti verrà segnalato un messaggio di ok.
Notate che se l'utente inserisce solo spazi, verrà considerato come input valido! Potete naturalmente controllare anche questa possibilità ed escluderla. Penso che non dovrebbe essere troppo difficile con le informazioni che avete fin qui acquisito.
Vediamo ora la funzione test2(form). Anche questa funzione controlla che sia stato inserito qualcosa nella relativa casella facendo un confronto con la stringa vuota, ma ho aggiunto qualcosa all'if. Il simbolo || indica l'operatore OR, di cui abbiamo parlato nella parte 6 di questo tutorial.
L'istruzione if controlla se il primo o il secondo confronto sono veri; se almeno uno lo è viene eseguito il comando successivo. Ciò vuol dire che otterrete un messaggio di errore se la vostra stringa è vuota o non contiene un @. La seconda operazione dell'istruzione if controlla se la stringa inserita contiene un @.

Quali diverse possibilità esistono per inviare il contenuto di una form? Il modo più semplice consiste nell'invio tramite e-mail. Questo è il metodo che ci accingiamo ad analizzare. Se volete ottenere un feedback senza e-mail e volete che il server gestisca l'input automaticamente, dovete usare CGI, per il momento. Dovete utilizzare CGI, per esempio, se volete creare un motore di ricerca come Yahoo, in cui l'utente ottiene un risultato velocemente dopo l'inserimento dei dati nella form. L'utente non deve attendere che il gestore del server legga l'input, vada alla ricerca dei dati richiesti e fornisca il relativo output: il tutto viene fatto automaticamente dal server. Javascript non è in grado di fare cose del genere. Anche se volete creare un guestbook (registro dei visitatori), non potete fare in modo con Javascript che il server aggiunga automaticamente informazioni ad una pagina HTML esistente. Soltanto con CGI potete ottenere questo al momento. Potete comunque creare un guestbook utilizzando l'e-mail: dovrete però inserire le informazioni manualmente. Può andar bene se non vi aspettate 1000 mail al giorno!
Il codice che segue è in puro HTML, quindi non abbiamo bisogno di Javascript! Naturalmente se vogliamo controllare l'input prima di inviare la form, dovremo scrivere qualche funzione Javascript. Devo dire che il comando mailto non funziona con tutti i browser, ma i browser più recenti lo supportano.

<FORM METHOD=POST ACTION="mailto:nome@domi.nio">
<H3>Ti piace questa pagina?</H3>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="1">No per niente.<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>E' una perdita di tempo.<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="3">E' il peggior sito della Rete.<BR>
  <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send">
</FORM>

Con questa form avrete un feedback via e-mail. L'unico problema è che riceverete una mail che può sembrare incomprensibile a prima vista. Talvolta tutti gli spazi vengono sostituiti con '+' o con '%20'. Le+mail+possono+avere+questo+aspetto. Esistono dei parser sulla Rete che formattano la mail in un aspetto più gradevole.

C'è un'altra cosa che può rendere gli elementi della vostra form un po' più user-friendly. Potete stabilire su quale elemento impostare inizialmente il focus oppure potete indicare al browser di posizionare il focus sulla form in cui l'utente ha inserito dei dati sbagliati. Ciò vuol dire che il browser posizionerà il cursore nell'elemento della form specificato in modo tale che l'utente non deve cliccarvi sopra per inserire i dati. Potete fare ciò con la seguente funzione:

function setfocus() {
        document.first.text1.focus();
        return;
}

Questo script imposta il focus sulla prima casella di testo della form dell'esempio illustrato prima. Occorre specificare il nome dell'intera form, nel nostro esempio first, e il nome del singolo elemento, text1. Se volete impostare il focus su questo elemento quando la pagina viene caricata, dovete aggiungere la proprietà onLoad al tag <body>; per esempio:

<body onLoad="setfocus()">

Sommario - Parte 1 - Parte 2 - Parte 3 - Parte 4 - Parte 5 - Parte 6