Jquery campi calcolati come fare calcoli nei campi di un form

Prosegue il nostro percorso nello studio del linguaggio Jquery affrontando il tema dei campi calcolati o, se volete, di come fare i calcoli nei campi di un form.

Le applicazioni scritte per il web sono da tempo approdate anche nelle reti locali, quindi 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

Un semplice Form

Cominciamo con il codice di un sempliccissimo form per l’inserimento e la raccolta dei dati.

<form id="form_fattura">
<input type="number" id="qta"/>
<input type="text" id="risultato"/>
</form>

Il codice di questo form va inserito in una pagina HTML, anche in questo caso vi faremo un semplice esempio.

La routine Jquery

Per completare questo nostro piccolissimo test dobbiamo solo aggiungere una routine che ad esempio calcola il doppio di un valore inserito nel campo del form con id=”qta”.

$(document).ready (function(){   
$('#qta').on('keyup change',function(){
    $('#risultato').val($(this).val() * 2);
    });
});

A questo punto abbiamo definito una funzione che si attiva sugli eventi “keyup change”, successivamente il campo del form con id=”risultato” sarà valorizzato eseguendo una moltiplicazione per 2.

La routine completa

Ci sembra giusto a questo punto riassumervi tutto in una semplice pagina html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Campi calcolati con JQuery</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(){   
$('#qta').on('keyup change',function(){
    $('#risultato').val($(this).val() * 2);
    });
});
</script>
<form id="form_fattura">
Qta:&nbsp;<input type="number" id="qta"/>
Risultato:&nbsp;<input type="text" id="risultato"/>
</form>
  </body>
</html>

Prova il codice

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.

Abbiamo testato per voi il codice e di seguito provate lo script:

Campi calcolati con JQuery

Conclusioni

Abbiamo visto in questo articolo come il linguaggio di programmazione jQuery può gestire campi calcolati e come possa fare calcoli nei campi di un form. 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.