Aggiungere dei campi a volo e sommare i valori con jQuery

Quest’oggi stavo sviluppando un tool per calcolare il valore totale di spesa per un determinato numero di prodotti da acquistare.
In pratica una specie di carrello elettronico come quelli che si vedono sui più comuni e-commerce.

Ora non sto a tediarvi con inutili dettagli ma passo subito al dunque.
Il mio problema era quello di dover prevedere una riga per ogni prodotto da acquistare con due input textbox:

• una dove inserire la quantità di prodotti
• un’altra dove inserirne il costo

Come fare per far aggiungere dei campi a volo e sommare i valori inseriti per calcolarne il costo totale?
Beh mi son detto: semplice uso jQuery!

Dopo “smanettamenti” vari sono riuscito ad ottenere un risultato soddisfacente per le mie esigenze e quindi ho deciso di condividerlo con voi.

Qui di seguito vi riporto il codice della mia pagina web (che può sempre tornarvi utile magari per altri progetti).
Se invece volete vederla in azione cliccate qui.

Codice jQuery da incorporare:

function miaFunzione() {
  $("#Container").append("<li><input type='text' class='qty' value='' placeholder='quantità' /> x <input type='text' class='money' value='' placeholder='costo' /> <a href='#' onclick='miaFunzione()'>aggiungi [+]</a></li>");
  var totQty = 0;
  var partial = 0;
  $("#Container li").each(function () {
     var qty = new Number($(this).children('.qty').val());
     var money = new Number($(this).children('.money').val());
     totQty = totQty + qty;
     partial = partial + (qty * money);
  });
  $("#totQty").html(totQty);
  $("#totMoney").html(partial);
}

Codice Html:

<ul id="Container">
   <li>
      <input class="qty" type="text" placeholder="quantità" value="" /> x <input class="money" type="text" placeholder="costo" value="" /> <a onclick="miaFunzione()" href="#">aggiungi [+]</a>
   </li>
</ul>
TOTALE PRODOTTI: <strong id="totQty">0</strong>
TOTALE COSTO: € <strong id="totMoney">0</strong>

Prossimamente vi posterò degli aggiornamenti per eliminare anche dei campi attraverso jQuery.
Nel frattempo accetto ulteriori suggerimenti per migliorare il codice o per aggiungere nuove funzioni.