Jquery campi calcolati come fare calcolo totali colonne di un form

Jquery ci può aiutare a rendere dinamiche ed “intelligenti” le nostre pagine web. Vedremo oggi col linguaggio Jquery come gestire i campi calcolati e nello specifico come fare il calcolo dei totali delle colonne di un form con più righe.

Abbiamo visto in un precedente articolo come eseguire dei calcoli con Jquery in un semplice form. Procediamo adesso con un esempio più complesso strutturato essenzialmente in due parti gestite dal linguaggio Jquery:

la gestione dei campi di un form
l’aggiunta o la cancellazione dinamica delle righe di un form

Indice

Il codice Jquery

Di segiuto la routine da inserire nei tag SCRIPT della vostra pagina HTML.

/* La funzione ROW gestisce il contenuto di ciascuna riga*/
function row(Codice, Descrizione, Tipo, Quantita, Prezzo) {
      this.Codice = Codice;
      this.Descrizione = Descrizione;
      this.Tipo = Tipo;
      this.Quantita = Quantita;
      this.Prezzo = Prezzo;
    this.Total = Quantita * Prezzo;
    }

/* La funzione MODEL gestisce lo schema per l'aggiunta o la cancellazione delle righe*/
    function model() {
      this.rows = [];
    }

    var mymodel = new model();

    $(document).ready(function() {
      $("body").on("click", ".delete", function() {
        var id = $(this).data('id');
        for (i = 0; i < mymodel.rows.length; i++) {
          console.log(mymodel.rows[i].Codice);
          if (mymodel.rows[i].Codice == id) {
            mymodel.rows.splice(i, 1);
          }
        }
        draw();
      });
      $('#add').click(function() {
        mymodel.rows.push(new row(
          $('#Codice').val(),
          $('#Descrizione').val(),
          $('#Tipo').val(),
          Number($('#Quantita').val()),
          Number($('#Prezzo').val())
        ))
        draw();
      });
    })

/* La funzione DRAW gestisce i calcoli e l'aggiunta o la cancellazione delle righe*/
    function draw() {
      $('tbody').empty();
      var totalQuantita = 0;
      var totalPrezzo = 0;
      $.each(mymodel.rows, function(i, row) {
        totalQuantita += row.Quantita;
        totalPrezzo += row.Prezzo * row.Quantita;
        var myrow = '<tr>';
        $.each(row, function(key, value) {
          myrow += '<td>' + value + '</td>'
        });
        myrow += '<td><input type="button" 
class="btn btn-danger delete" data-id="' + row.Codice + '" value="X"/></td>'
        myrow += '<tr>'
        $('tbody').append(myrow);
      });
      $('#totalQuantita').text(totalQuantita)
      $('#totalPrezzo').text(totalPrezzo)
    }

Il Form HTML

Questa parte è più semplice , intuirete dal codice che l’aggancio dei tag HTML del form al linguaggio Jquery avviene grazie alla proprietà ID.

<form class="form-inline">
      <div class="form-group">
        <label for="id">Codice #:</label>
        <input type="text" class="form-control" id="Codice">
      </div>
      <div class="form-group">
        <label for="PartName">Descrizione:</label>
        <input type="text" class="form-control" id="Descrizione">
      </div>
      <div class="form-group">
        <label for="type">Tipo:</label>
        <select name="type" id="Tipo" class="form-control">
                    <option value="" selected="selected">Seleziona ...</option>
                    <option value="tipo-articolo">Articolo</option>
                    <option value="tipo-servizio">Servizio</option>
                    </select>
      </div>
      <div class="form-group">
        <label for="Quantita">Quantit&agrave;:</label>
        <input type="number" class="form-control" id="Quantita">
      </div>
      <div class="form-group">
        <label for="Prezzo">Prezzo:</label>
        <input type="number" class="form-control" id="Prezzo">
      </div>
      <input type="button" class="btn btn-info" value="Aggiungi Riga" id="add" />
    </form>

La routine completa

Finalmente ecco la pagina HTML completa che potrete testare sul vostro web server

   <html>
    <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript">
function row(Codice, Descrizione, Tipo, Quantita, Prezzo) {
      this.Codice = Codice;
      this.Descrizione = Descrizione;
      this.Tipo = Tipo;
      //this.DebitCredit = DebitCredit;
      this.Quantita = Quantita;
      this.Prezzo = Prezzo;
    this.Total = Quantita * Prezzo;
    }
    function model() {
      this.rows = [];
    }
    var mymodel = new model();
    $(document).ready(function() {
      $("body").on("click", ".delete", function() {
        var id = $(this).data('id');
        for (i = 0; i < mymodel.rows.length; i++) {
          console.log(mymodel.rows[i].Codice);
          if (mymodel.rows[i].Codice == id) {
            mymodel.rows.splice(i, 1);
          }
        }
        draw();
      });
      $('#add').click(function() {
        mymodel.rows.push(new row(
          $('#Codice').val(),
          $('#Descrizione').val(),
          $('#Tipo').val(),
          Number($('#Quantita').val()),
          Number($('#Prezzo').val())
        ))
        draw();
      });
    })
    function draw() {
      $('tbody').empty();
      var totalQuantita = 0;
      var totalPrezzo = 0;
      $.each(mymodel.rows, function(i, row) {
        totalQuantita += row.Quantita;
        totalPrezzo += row.Prezzo * row.Quantita;
        var myrow = '<tr>';
        $.each(row, function(key, value) {
          myrow += '<td>' + value + '</td>'
        });
        myrow += '<td><input type="button" 
class="btn btn-danger delete" data-id="' + row.Codice + '" value="X"/></td>'
        myrow += '<tr>'
        $('tbody').append(myrow);
      });
      $('#totalQuantita').text(totalQuantita)
      $('#totalPrezzo').text(totalPrezzo)
    }
    </script>
        </head>
    <body>
<form class="form-inline">
      <div class="form-group">
        <label for="id">Codice #:</label>
        <input type="text" class="form-control" id="Codice">
      </div>
      <div class="form-group">
        <label for="PartName">Descrizione:</label>
        <input type="text" class="form-control" id="Descrizione">
      </div>
      <div class="form-group">
        <label for="type">Tipo:</label>
        <select name="type" id="Tipo" class="form-control">
                    <option value="" selected="selected">Seleziona ...</option>
                    <option value="tipo-articolo">Articolo</option>
                    <option value="tipo-servizio">Servizio</option>
                    </select>
      </div>
      <div class="form-group">
        <label for="Quantita">Quantit&agrave;:</label>
        <input type="number" class="form-control" id="Quantita">
      </div>
      <div class="form-group">
        <label for="Prezzo">Prezzo:</label>
        <input type="number" class="form-control" id="Prezzo">
      </div>
      <input type="button" class="btn btn-info" value="Aggiungi Riga" id="add" />
    </form>
<br>
<h4>Documento Fiscale</h4>
<h5>n. 123 del 30/05/2020</h5>
    <table class="table table-condensed">
      <thead>
        <tr>
          <td>Codice #</td>
          <td>Descrizione</td>
          <td>Tipo</td>
          <td>Quantit&agrave;</td>
          <td>Prezzo</td>
      <td>Totale</td>
          <td>Cancella</td>
        </tr>
      </thead>
      <tbody>
      </tbody>
      <tfoot>
        <tr>
          <td colspan=7>Quantit&agrave; Totale:
            <span id="totalQuantita"></span> Prezzo Totale:
            <span id="totalPrezzo"></span>
          </td>
        </tr>
      </tfoot>
    </table>
  </body>
    </html>

Prova il codice

Vi ricordiamo, come già fatto altre volte, di includere nella parte HEAD della pagina HTML le librerie:

jquery.min.js nella versione 1.12.4 link per il download: https://code.jquery.com/jquery/
bootstrap.min.css versione 3.3.1 da scaricare al link: https://blog.getbootstrap.com/2014/11/12/bootstrap-3-3-1-released/

Queste librerie sono caricate on-line come nell’esempio, oppure possono essere scaricate e salvate in locale per le vostre applicazioni da installare nella vostra intranet.

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

Documento Fiscale

n. 123 del 30/05/2020

Codice #	Descrizione	Tipo	Quantità	Prezzo	Totale	Cancella
Quantità Totale: Prezzo Totale:

Conclusioni – Jquery campi calcolati come fare calcolo totali colonne di un form

Abbiamo visto in questo articolo il linguaggio di programmazione Jquery e come gestire i campi calcolati e nello specifico come fare il calcolo dei totali delle colonne di un form con più righe. 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.