Come costruire un form per un preventivo in JavaScript

Nel post precedente ci siamo occupati delle operazioni sui dati. Vediamo ora un esempio concreto del loro uso.
Supponiamo di voler costruire un modulo in cui l'utente possa calcolare il preventivo di spesa per una vacanza. L'esempio è "grezzo" e si può realizzare meglio con ulteriori conoscenze... ma almeno proviamo a mettere in pratica la teoria.

Questi sono i passi seguiti:

1. costruire un form contenente i campi in cui l'utente possa inserire i parametri necessari per il calcolo del preventivo;
2. recuperare i valori inseriti dall'utente;
3. scrivere il codice per il calcolo del preventivo;
4. visualizzare nella pagina il risultato ottenuto

DEMO

La scrittura del form è piuttosto semplice. Ipotizzando di voler gestire solo tre valori, bastano tre campi di input type="text" e due campi per l'invio/reset dei dati. Ogni campo input dovrà essere dotato di un suo valore di id in modo che esso potrà essere utilizzato nel codice javascript per identificare il campo e per recuperare il valore inserito dall'utente. Il form non punta a nessun file visto che l'elaborazione dei dati è affidata a javascript: per questo motivo il bottone per l'invio dei dati non è type="submit" ma type="button". Con qualche riga di CSS si assegna al form l'aspetto desiderato.

La parte più semplice da scrivere del codice javascript è la formula per il calcolo del preventivo:

numero giorni *(numero adulti * prezzo adulti + numero bambini * prezzo bambini)

L'uso delle parentesi tonde permette di variare le regole di precedenza tra gli operandi: le operazioni contenute nella parentesi verranno eseguite prima della moltiplicazione esterna. Il valore di prezzo adulti e prezzo bambini è fisso, in questo caso 80 e 50.

Ma come recuperare i dati dal form? Con javascript è possibile individuare qualsiasi elemento della pagina document dotato di identificatore univoco id attraverso il metodo getElementById('id_elemento').
Il valore inserito dall'utente nel campo è memorizzato nella proprietà value. Basta inserire ciascun valore in una variabile ed utilizzare le variabili per costruire la formula per il calcolo del preventivo:

var g=document.getElementById('giorni').value;
var a=document.getElementById('adulti').value;
var b=document.getElementById('bimbi').value;
var preventivo=g*(a*80+b*50);

Dove inserire questo codice? In realtà, inserito in head o in body immediatamente dopo il form... non fa differenza, non funziona! E non può funzionare perchè il codice viene letto una volta sola, al caricamento della pagina e non nel momento in cui l'utente scrive i dati nel form.
Occorre quindi associare il codice javascript ad un evento che coincida con un'azione dell'utente sul form.
Ci sono diversi eventi legati ai form, ma quello che, in questo caso, ci assicura che l'utente sta richiedendo il calcolo del preventivo è senza dubbio il click sul bottone "calcola" del form (evento onclick).
E' possibile inserire tutto il codice all'interno dell'attributo onclick del bottone del form ma è ancora più semplice, oltre che comodo, scrivere l'intero blocco di codice in una funzione. Il codice base di una funzione javascript è questo:

function nomeFunzione(){
 //qui il blocco di codice
 }

Per richiamare una funzione in relazione ad un evento specifico, basta indicarne il nome, seguito dalle due parentesi tonde:

 function calcola(){
 var g = document.getElementById('giorni').value;
 var a = document.getElementById('adulti').value;
 var b = document.getElementById('bimbi').value;
 var preventivo=(a*80+b*50)*g;
 }

Quindi nel codice del form richiamiamo la funzione realizzata, che viene eseguita quando l'utente clicca sul bottone "calcola":

<input class="button" type="button" value="calcola" onclick="calcola()" />

Per far apparire a video il risultato dobbiamo utilizzare un metodo che genera un output. Javascript mette a disposizione la proprietà innerHTML che scrive all'interno dell'oggetto della pagina, identificato da un id univoco il testo desiderato, generando dei veri e propri elementi dinamici. Inseriamo quindi nella pagina un div con id="calcolo" con un testo a piacere:

 <div id="calcolo">Totale: 0 euro</div> 

Nella funzione JavaScript richiamiamo il div che deve ospitare il testo sempre con document.getElementById ed associamo ad esso il nuovo testo che potrà contenere, oltre al valore della variabile preventivo, anche una parte di testo fissa. Per legare stringhe e valori di variabili si usa l'operatore di concatenazione + che, in questo caso, non esegue un'operazione aritmetica ma, come dice il termine, concatena due stringhe, quella fissa con quella variabile, generando un unico output.
Infine inseriamo un controllo sui valori inseriti dall'utente: se sono numeri !isNaN viene restituito il calcolo, altrimenti viene visualizzata una frase di avvertimento.
Le istruzioni condizionali if/else verranno trattate nel prossimo post.

var risultato=document.getElementById('calcolo');
if (!isNaN(g) && !isNaN(a) && !isNaN(b)){
var preventivo ="Totale: "+(a*80+b*50)*g+" euro";
}
else{
var preventivo = "Inserisci valori numerici!";
}
risultato.innerHTML=preventivo;

Ecco il codice completo della funzione da inserire in head:

<script type="text/javascript">
function calcola(){
var g=document.getElementById('giorni').value;
var a=document.getElementById('adulti').value;
var b=document.getElementById('bimbi').value;
var risultato=document.getElementById('calcolo');
if (!isNaN(g) && !isNaN(a) && !isNaN(b)){
var preventivo ="Totale: "+(a*80+b*50)*g+" euro";
}
else{
var preventivo = "Inserisci valori numerici!";
}
risultato.innerHTML=preventivo;
}
</script> 

17.04.2014 Modificato script