Elaborare il valore inserito nei campi di un form prima di inviarlo – Javascript

Creiamo una semplice form con due campi testo di cui uno solo in lettura e un bottone di invio che richiama la nostra funzione Javascript. Inserendo un numero nel campo Totale, alla pressione del bottone di invio, verrà calcolato il totale+iva, verrà visualizzato un allert con il valore calcolato e alla conferma dell’allert verrà inviata la form contenete la variabile totale inserita e la variabile totale_ivato calcolata.

<form name="prova" action="http://url_di_destinazione" method="post">
<label>Totale</label>
<input type="text" name="totale" id="totale"  />
<br />
<labe>Totale ivato</label>
<input type="text" name="totale_ivato" id="totale_ivato" readonly="true" />
<br />
<input type="button" onclick="calcola();" value="invia" />
</form>


<script type="text/javascript">
function calcola(){
var totale  = document.getElementById('totale').value;
var ivato = totale * 1.22;
totale_ivato=document.prova.totale_ivato;
totale_ivato.value=ivato;
alert('Il totale ivato è: ' + ivato );
document.prova.submit();
}
</script>

Alla pressione del bottone verrà chiamata la funzione calcola() che dovrà essere inserita all’interno dei tag HEAD della pagina web.
Vediamo come funziona calcola()

var totale = document.getElementById('totale').value;

carica nella variabile ‘totale’ il contenuto del campo testo con id = ‘totale’

var ivato = totale * 1.22;

crea la variabile ‘ivato’ che è uguale a totale + iva20%

totale_ivato=document.prova.totale_ivato;
totale_ivato.value=ivato;

viene impostato il contenuto della variabile ivato all’interno come valore del campo del form ‘totale_ivato

alert('Il totale ivato è: ' + ivato + '');

viene creato un allert con il relativo messaggio

document.prova.submit();

alla conferma dell’allert viene inviata la form name  ‘prova’