creare un preventivo con chronoforms

Nell'ultimo periodo mi sono arrivate diverse richieste di di esempi di form in grado di effettuare preventivi o calcoli. Nel seguente form per richiesta preventivo, costruito sulla base di un indicazione per calcolare l'importo/servizi di una camera di albergo in base ai servizi scelti, abbiamo la possibilità di moltiplicare un prezzo per una quantità, avendo in tempo reale un risultato parziale ed uno totale.

Form per richiesta preventivo

Vediamo la logica del form per preventivare il prezzo di una camera

I servizi inseriti sono 3, ma sarà possibile aggiungerne quanti ne vogliamo. Il prezzo unitario del servizio è  impostato in sola lettuta ed è impostabile dall'amministratore del form nel campo prezzo. Per la quantità ho scelto di inserire una dropdownlist con alcuni valori, ma sarebbe potuto andare bene anche un semplice campo di testo dove inserire direttamente la quantità. Il campo del subtotale è reso in sola lettura inserendo fra le opzioni del campo "readonly".

In questo form sono presenti solo i campi necessari al calcono, quindi chi deciderà di scaricarlo lo dovrà integrare con le funzioni di invio ed eventualmente del pagamento dell'importo, funzioni presenti in altri form disponibili in questo sito e che possono essere scaricati e provati.

Creiamo il preventivatore con chronoforms V5

Il mio consiglio è quello di scaricare il form ed installarlo. Visualizzando le opzioni nel form e seguendo le istruzioni riportate di seguito potrete capire facilmente la sua "costruzione".

Procediamo con la costruzione del form inserendo i campi nella zona Design

Iniziamo con il creare i campi necessari, per ogni voce/servizio/bene/quello che volete, avremo bisogno di 3 campi che inseriremo in un multifield con un campo textbox, un campo dropdownlist e nuovamente un textbox (esattamente in questo ordine).

Ricordatevi il naming! Lasciare i nomi del field name e del field ID di serie servirà solo a confondervi, mentre utilizzerò per il nome del voce/servizio/bene/quello che volete solo il campo label (usato solo nella label del prezzo unitario), infine userò le sub label per identificarne il campo nel front-end. Per i campi non modificabili dall'utente (prezzo unitari e prezzo finale) inserirò "readonly=readonly" (senza virgolette) nel campo extra params, mentre inserirò il prezzo nel campo Field Value ricordandomi di inserire i decimali e usando il punto come separatore.

L'operazione appena fatta ripetetela per quanti voce/servizio/bene/quello che volete avrete bisogno, io nell'esempio ne ho usato 3: camera singola, camera doppia, letto supplementare.

Create infine un ulteriore campo dove verrà visualizzato il totale, ricordandovi di inserire "readonly=readonly" (senza virgolette) nel campo extra params.

Inseriamo alcuni elementi nella zona Setup

Nella zona ON LOAD inseriamo in questo ordine un elemento "Load javascript" e "HTML Render Form", quindi apriamo l'elemento "load javascript" ed incolliamo il seguente codice:

jQuery(document).ready
 (function (op)
 {
 op('#prezzosingola').on('change', operazione);
 op('#qtsingola').on('change', operazione);
 op('#prezzodoppia').on('change', operazione);
 op('#qtdoppia').on('change', operazione);
 op('#prezzolsup').on('change', operazione);
 op('#qtlsup').on('change', operazione); 
 op('#totale').on('change', operazione); 

 function operazione ()
 {
 var prezzosingola = Number (op('#prezzosingola').val());
 var qtsingola = Number (op('#qtsingola').val());
 op('#totsingola').val(( prezzosingola * qtsingola).toFixed(2));

 var prezzodoppia = Number (op('#prezzodoppia').val());
 var qtdoppia = Number (op('#qtdoppia').val());
 op('#totdoppia').val(( qtdoppia * prezzodoppia).toFixed(2));
  
 var prezzolsup = Number (op('#prezzolsup').val());
 var qtlsup = Number (op('#qtlsup').val());
 op('#totlsup').val(( qtlsup * prezzolsup).toFixed(2));
  
 var totsingola = Number (op('#totsingola').val());
 var totdoppia = Number (op('#totdoppia').val());
 var totlsup = Number (op('#totlsup').val());
 op('#totale').val(( totsingola + totdoppia + totlsup).toFixed(2));
 }
}
);

Questo codice javascript è ottimizzato per avere restituiti importi con i decimali, ma dove servissero importi senza decimali, sarà opportuno trasformare le stringhe che contengono .toFixed(2), da così

op('#totsingola').val(( prezzosingola * qtsingola).toFixed(2));

a così

op('#totsingola').val( prezzosingola * qtsingola);

La guida finisce qui, se ti è piaciuta puoi ringraziarmi cliccando su un banner e lasciando un commento qui sotto!

{phocadownload view=file|id=12|target=s}