Abbiamo visto che tante applicazioni scritte per il web sono da tempo approdate anche nelle reti locali. La necessità di realizzare procedure sempre più complesse è giustificata dalla vasta platea di utenti e di software per la gestione. Il problema che affrontiamo è quello di utilizzare un linguaggio di scripting che non ci “costringa” a ricaricare la pagina per visualizzare dei risultati aggiornati. Prima di iniziare, spesso diamo per scontato che chi si imbatte in queste pagine sia gia al corrente degli strumenti minimi per poter effettuare delle prove di codice. A tale proposito ricordiamo che per provare queste semplici righe di codice sono necessari i seguenti strumenti software:
- Browser che utilizzate per navigare (Firefox, Chrome, Opera, Safati, … fate voi)
- Editor per la scrittura del codice (ad esempio Sublime Text)
- Web Server installato in locale (ad esempio XAMPP) o servizio web con file da salvare con l’FTP
Indice
Campi input e un semplice Form
Cominciamo con il codice di un sempliccissimo form che contiene dei campi per l’inserimento, l’elaborazione e la raccolta dei dati.
<form id="calcolo_ritenuta_acc"> <input type="number" id="lordo"/> <input type="number" id="ritenuta"/> <input type="number" id="netto"/> </form>
Il secondo passo è definire una funzione Jquery che affettui i calcoli in modo opportuno:
<script type="text/javascript">
$(document).ready (function(){
$('#lordo').on('keyup change',function(){
var k = new Number ($(this).val());
var ritenuta_acc = new Number (($(this).val() * 20)/100);
var netto = new Number (k - ritenuta_acc);
$('#ritenuta').val(ritenuta_acc);
$('#importo_netto').val(netto);
});
});
</script>
La routine completa per il calcolo della ritenuta di acconto
A questo punto possiamo riassumervi tutto in una semplice pagina html che realizza il calcolo della ritenuta di acconto:
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Campi calcolati con JQuery - Calcolo Ritenuta di Acconto</title>
</head>
<body>
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready (function(){
$('#lordo').on('keyup change',function(){
var k = new Number ($(this).val());
var ritenuta_acc = new Number (($(this).val() * 20)/100);
var netto = new Number (k - ritenuta_acc);
$('#ritenuta').val(ritenuta_acc);
$('#importo_netto').val(netto);
});
});
</script>
<h5><b>Calcolatore Ritenuta di Acconto</b></h5>
<h6><b>Inserisci l'importo Lordo Totale della prestazione</b></h6><br>
<form id="calcolo_ritenuta_acc">
<table><tr><td>
Importo Totale Lordo: </td><td><input type="number" id="lordo"/> <br></td></tr><tr>
<td>Ritenuta di Acconto: </td><td><input type="number" id="ritenuta"/> <br></td></tr><tr>
<td>Importo Netto per il Professionista: </td><td><input type="number" id="importo_netto"/> <br></td></tr>
</table></form>
</body>
</html>
Calcolatore Ritenuta di Acconto
Inserisci l'importo Lordo Totale della prestazione
Osservazioni e Prova del codice
Negli esempi di campi calcolati che vi abbiamo proposto fino ad ora abbiamo attivato i nostri calcoli sull’evento keyup change del campo input id=”lordo”. Avremmo potuto anche gestire l’evento submit del form. Diamo uno sguardo a queste semplici righe di codice:
<p>Scrivi 1234 per validare il campo</p>
<form action="javascript:alert( 'Successo!' );">
<div>
<input type="text">
<input type="submit">
</div>
</form>
<span></span>
<script>
$( "form" ).submit(function( event ) {
if ( $( "input" ).first().val() === "1234" ) {
$( "span" ).text( "Campo Validato..." ).show();
return;
}
$( "span" ).text( "Campo non valido!" ).show().fadeOut( 1000 );
event.preventDefault();
});
</script>
Nell’esempio proposto abbiamo la necessità che i valori inseriti nei campi input siano numeri. Per questo motivo occorre utilizzare il costruttore dell’oggetto Number. Per gestire la precisione decimale, potremmo utilizzare il già citato in un precedente articolo metodo toFixed, di default jquery gestisce una sola cifra decimale di precisione, a voi lasciamo la possibilità di migliorare questo semplice script. Infine, vi ricordiamo, come già fatto altre volte, di includere nella parte HEAD della pagina HTML la libreria:
- jquery.min.js nella versione 1.12.4
Questa libreria viene caricata on-line come nell’esempio, oppure può essere scaricata e salvata in locale per le vostre applicazioni da installare nella vostra intranet.
Conclusioni
Abbiamo visto in questo articolo come il linguaggio di programmazione jQuery può gestire campi calcolati e come possa calcolare la ritenuta di acconto per le fatture dei professionisti. E altresì utile ricordare che in questo Blog abbiamo inserito tutta una sezione riservata a JQuery e agli esempi di codice che comportano la presenza di questo linguaggio di programmazione. Vi invitiamo quindi a visitare questa sezione del sito.