Form che faccia calcolo

**atigra** · 10-08-2014, 11:51

Originariamente inviata da KillerWorm

Ciao, per rendere un campo input non modificabile da utente puoi usare l'attributo readonly. Chiaramente qualche utente malintenzionato puo andare a modificare il valore per vie traverse sul browser, per cui è sempre buona norma fare opportuni controlli lato server dopo l'invio dei dati.

Inoltre, se si tratta di HTML5, per i campi input in cui vanno inseriti numeri sarebbe più consono adoperare type=number. La maggior parte dei recenti browser presenta uno stepper affianco ad un campo number in modo da facilitarne l'inserimento dei dati.
In tal caso però bisogna eliminare gli attributi size e maxlength, non sono consentiti in un campo di tipo number. Nel caso puoi specificare opportunamente gli attributi min e max.

Per fare un calcolo automatico, funzionale, puoi usare qualche riga di javascript che aggiorni il risultato in tempo reale, man mano che vengono inseriti i dati.
Ti posto un esempio in base alle tue indicazioni:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script type="text/javascript">
    
      var c1,c2,c3,c4,c5;
    
      function calcola(){
        var v1 = c1.value;
        var v2 = c2.value;
        var v3 = c3.value;
        var v4 = c4.value;
        c5.value = v1-v2-v3-v4;
      }

      // Al caricamento della pagina
      window.onload = function(){
      
        // I campi interessati al calcolo
        c1 = document.form.campo1;
        c2 = document.form.campo2;
        c3 = document.form.campo3;
        c4 = document.form.campo4;
        c5 = document.form.campo5;
        
        // Assegno un handler per richiamare la funzione calcola() automaticamente quando avviene una qualsiasi modifica dei valori nei campi
          c1.onchange = c1.onkeypress = c1.onpaste = c1.oninput
        = c2.onchange = c2.onkeypress = c2.onpaste = c2.oninput
        = c3.onchange = c3.onkeypress = c3.onpaste = c3.oninput
        = c4.onchange = c4.onkeypress = c4.onpaste = c4.oninput
        = calcola;
        
        // Se serve, puoi eseguire il calcolo ad apertura pagina per aggiornare il risultato nel caso i campi siano popolati in qualche modo preventivamente
        calcola();
      }
      
    </script>
  </head>
  <body>
    <form action="#" method="post" name="form">
      <input type="number" name="campo1" value="">Campo 1<br>
      <input type="number" name="campo2" value="">Campo 2<br>
      <input type="number" name="campo3" value="">Campo 3<br>
      <input type="number" name="campo4" value="">Campo 4<br>
      <hr>
      <input readonly type="text" name="campo5" value="">Campo 5<br>
      <hr>
      <input type="submit" value="Invia dati">
    </form>
</body>
</html>

Chiaramente si può risolvere in tanti altri modi.

Ho provato, direi che funziona bene, grazie! E' proprio quello di cui avevo bisogno.

**atigra** · 11-08-2014, 21:54

Ci sarebbe solo un piccolo inghippo: quando vado ad esportare i dati per excel, i numeri non me li prende per fare le somme. Mi spiego meglio: il sistema del form funziona correttamente se vengono inseriti numeri decimali separati dal punto e non dalla virgola, come si può fare esattamente il contrario?

**cavicchiandrea** · 11-08-2014, 22:27

Fai un replace punto/virgola lato server prima di salvare i dati in excel, in js la virgola non è contemplato come simbolo separatore matematico non funzionerebbe o darebbe un errore.

**atigra** · 11-08-2014, 22:31

Mah, ho un sistema che mi esporta tutto in excel in automatico, non saprei nemmeno dove andare a mettere le mani (si chiama FormTools). A meno che da Excel (che tra l'altro non uso perchè ho OpenOffice) si possano trasformare senza impazzire a farlo uno per uno tutte le virgole in punti...

**KillerWorm** · 11-08-2014, 22:30

In linea di massima puoi "formattare" in qualche modo i valori recuperati nella funzione calcola.
Ad esempio puoi fare un semplice replace, su ciascun valore, per "convertire" la virgola in punto, e/o nel caso usare delle espressioni regolari per una formattazione più specifica.

**atigra** · 11-08-2014, 22:32

Originariamente inviata da KillerWorm

In linea di massima puoi "formattare" in qualche modo i valori recuperati nella funzione calcola.
Ad esempio puoi fare un semplice replace, su ciascun valore, per "convertire" la virgola in punto, e/o nel caso usare delle espressioni regolari per una formattazione più specifica.

ehhmm... sarebbe? Me lo puoi cortesemente far vedere nel codice che mi avevi postato giorni fa e che funziona?
Domanda: ma chi compila i campi deve inserire il punto o la virgola?

**KillerWorm** · 12-08-2014, 15:43

In JavaScript va utilizzato il punto come ha chiaramente indicato Andrea, anche se con input di tipo number, in genere è possibile usare indistintamente sia la virgola che il punto (perlomeno in Europa, da quel poco che ho letto, mentre in alcuni paesi si deve usare o l'uno o l'altro. Immagino dipenda delle impostazioni di sistema o qualcosa del genere).

Ad ogni modo sarebbe sempre meglio usare il punto, dal momento che parliamo di JavaScript, ed eventualmente, nel caso sia usata la virgola, convertirla col punto.

Ti posto il codice aggiornato:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script type="text/javascript">
      
      var c1,c2,c3,c4,c5;
      var v1,v2,v3,v4,v5;
      
      function calcola(){
        if (v1 != c1.value) v1 = valNum(c1);
        if (v2 != c2.value) v2 = valNum(c2);
        if (v3 != c3.value) v3 = valNum(c3);
        if (v4 != c4.value) v4 = valNum(c4);
        c5.value = v1-v2-v3-v4;
      }
      
      // Formatta il value del campo come valore numerico e lo restituisce
      function valNum(c){
        return  +(c.value = c.value.replace(",",".").match(/\d*[.]?\d*/));
      }
      
      // Al caricamento della pagina
      window.onload = function(){
        
        // I campi interessati al calcolo
        c1 = document.form.campo1;
        c2 = document.form.campo2;
        c3 = document.form.campo3;
        c4 = document.form.campo4;
        c5 = document.form.campo5;
        
        // Assegno un handler per richiamare la funzione calcola() automaticamente quando avviene una qualsiasi modifica dei valori nei campi
          c1.onchange = c1.onkeyup = c1.onpaste = c1.oninput 
        = c2.onchange = c2.onkeyup = c2.onpaste = c2.oninput
        = c3.onchange = c3.onkeyup = c3.onpaste = c3.oninput
        = c4.onchange = c4.onkeyup = c4.onpaste = c4.oninput
        = calcola;
        
        // Se serve, puoi eseguire il calcolo ad apertura pagina per aggiornare il risultato nel caso i campi siano popolati in qualche modo preventivamente
        calcola();
      }
      
    </script>
  </head>
  <body>
    <form action="#" method="post" name="form">
      <input type="text" name="campo1" value="">Campo 1<br>
      <input type="text" name="campo2" value="">Campo 2<br>
      <input type="text" name="campo3" value="">Campo 3<br>
      <input type="text" name="campo4" value="">Campo 4<br>
      <hr>
      <input readonly type="text" name="campo5" value="">Campo 5<br>
      <hr>
      <input type="submit" value="Invia dati">
    </form>
</body>
</html>

Ho dovuto modificare un po' di cose. Una delle varie, l'uso di input text e non number, perché questo creava problemi con la funzione di replace. Immagino sia dovuto al fatto che ci sono nativamente dei controlli sull'input number, per cui si generano dei conflitti.

Discussione: Form che faccia calcolo

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio