Sommare valori

Gli argomenti di questa pagina

  • Sommare valori tra caselle di testo

Sommare valori tra caselle di testo

Alle volte può tornare utile avere un totale o un sub-totale dei valori che si immettono in caselle di testo e visualizzarlo durante la digitazione.

Questo che segue potrebbe essere un esempio di impiego.
La funzione JS è semplice.
Vengono inizializzate le 4 variabili, una per ogni casella di testo da calcolare, ponendo il loro valore iniziale a 0 (zero) (questo per evitare che, durante l'immissione dei dati, sorgano errori nella somma di eventuali valori nulli).
Quindi viene messo in una variabile l'oggetto "document.somma_valori" (il riferimento al nome del form) per evitare lungaggini nella scrittura del codice che anzichè essere
sv.text1.value = ""; (come è ora)
dovrebbe essere
document.somma_valori.text1.value = "";
Prima di prelevare l'effettivo valore della casella di testo, viene controllato se il valore sia veramente numerico
Quindi viene letto e prelevato il valore della casella di testo con a=eval(sv.text1.value);
Alla fine vengono sommati tutti i numeri prelevati e depositato il risultato nella quinta casella di testo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 		function somma(){
    var a = 0;
    var b = 0;
    var c = 0;
    var d = 0;
    var sv = document.somma_valori;    
    if (isNaN(sv.text1.value)) {
        sv.text1.value = "";
    } else {
        a=eval(sv.text1.value);
    }
    if (isNaN(sv.text2.value)) {
        sv.text2.value = "";
    } else {
        b=eval(sv.text2.value*1);
    }
    if (isNaN(sv.text3.value)) {
        sv.text3.value = "";
    } else {
        c=eval(sv.text3.value*1);
    }
    if (isNaN(sv.text4.value)) {
        sv.text4.value = "";
    } else {
        d=eval(sv.text4.value*1);
    }
    if (!isNaN(a+b+c+d)) {
        sv.text5.value=a+b+c+d;
    }
} 

Questo è il form, sintatticamente semplice. c'è da osservare solo che ogni casella di testo intercetta l'evento onkeyup() che invia alla funzione JS ogni volta si preme un tasto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 		<div align="center">
<form name="somma_valori" method="post" action="">
<table class="tabella_it">
<tr>
<th colspan="2">Somma dei valori</th>
</tr>
<tr>
<td>Primo val</td>
<td><input type="text" name="text1" id="text1" onkeyup="somma()" /></td>
</tr>
<tr>
<td>Secondo val</td>
<td><input type="text" name="text2" id="text2" onkeyup="somma()" /></td>
</tr>
<tr>
<td>Terzo val</td>
<td><input type="text" name="text3" id="text3" onkeyup="somma()" /></td>
</tr>
<tr>
<td>Quarto val</td>
<td><input type="text" name="text4" id="text4" onkeyup="somma()" /></td>
</tr>
<tr>
<td>Vedi</td>
<td><input type="text" name="text5" id="text5" readonly="readonly" /></td>
</tr>
<tr>
<td><input type="reset" name="button" id="button" value="RESET" /></td>
<td><input type="button" name="btnElabora" value="Elabora" onclick="somma()" /></td>
</tr>
</table>
</form><br />
</div>

Qui di seguito un piccolo esempio per verificare il codice qui sopra mostrato

Somma dei valori
Primo val
Secondo val
Terzo val
Quarto val
Vedi

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum