Doing calculations on dynamic form fields

Question

I am trying to make a script where you can enter a product name, quantity, price and tax %. This then calculates the total cost per product and the overall total. The only problem is I am adding new form fields each time a new product has to be added.

Now my question: what is the best way to calculate the total price per product and the overall total?

Here is what I have so far but I'm pretty stuck since I'm new to javascript. It also saves the fields to mysql which all works fine, I'm just stuck on the total price per product and overall total.

Thanks in advance!

      <form method="post">
    <div id="itemRows">

product: <input type="text" name="add_product" />   
amount:<input type="text" id="value1" name="add_qty" size="4" onChange="output();"/> 
price:<input type="text" id="value2" name="add_price" onChange="output();"/> 
<select type="text" name="add_tax" onChange="output();">
  <option value="21">21%</option>
  <option value="6">6%</option>
  <option value="0">0%</option>
</select> 






 <input onClick="addRow(this.form); output()" type="button" value="Save product line..." /> 




    </div>

    <p><input type="submit" name="ok" value="Save Changes"></p>
    </form>
     <p id="result"> </p>

</div>

<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
    rowNum ++;
    var row = '<p id="rowNum'+rowNum+'">product: <input type="text" name="product[]" id = "product['+rowNum+']" value="'+frm.add_product.value+'"> amount: <input type="text" id="qty['+rowNum+']" name="qty[]" size="4" value="'+frm.add_qty.value+'"> price: <input type="text" id="price['+rowNum+']" name="price[]" value="'+frm.add_price.value+'">tax: <select type="text" id="tax['+rowNum+']" name="tax[]" value="'+frm.add_tax.value+'"><option value="21">21%</option><option value="6">6%</option><option value="0">0%</option><input type="button" value="Remove" onclick="removeRow('+rowNum+');output()"><div id="rowResult[rowNum]"></div>  <div id="rowResult[rowNum]"> </div></p>'  ;
    jQuery('#itemRows').append(row);

    frm.add_qty.value = '';

    frm.add_product.value = '';
    frm.add_price.value = '';
    frm.add_tax.value = '';
}

function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
}

</script>


<script type="text/javascript" language="javascript" charset="utf-8">

function output(){
    var tableTotal = 0;
    var rowTotal = 0;
    qtyArr = new Array();
    priceArr = new Array();
    taxArr = new Array();
    $( "input[name^='qty']" ).each(function( index ) {
        qtyArr.push(parseInt($( this ).val()));
    });
    $( "input[name^='price']" ).each(function( index ) {
        priceArr.push(parseInt($( this ).val()));
    });
    $( "select[name^='tax']" ).each(function( index ) {
        taxArr.push(parseInt($( this ).val()));
    }); 
    $("div[id^=rowResult]").each();
    for(i = 0; i< qtyArr.length; i++)
    {
        rowTotal = qtyArr[i] * priceArr[i] * ((taxArr[i] / 100)+1);
        tableTotal+=rowTotal;
    }
    document.getElementById('result').innerHTML = "Total: " + tableTotal;


}

</script>

Answer 1

here is the running JSFiddle What you need to do is to get all your inputs with jquery selector then iterate through them to get their values. once you got the values its easy to calculate row total and table total values

<div style="width:90%;margin:auto;">

    <form method="post">
    <div id="itemRows">

product: <input type="text" name="add_product" />   
amount:<input type="text" id="value1" name="add_qty" size="4" onchange="output();"/> 
price:<input type="text" id="value2" name="add_price" onchange="output();"/> 
<select type="text" name="add_tax" onchange="output();">
  <option value="21">21%</option>
  <option value="6">6%</option>
  <option value="0">0%</option>
</select> 



 <p id="result"> </p>

 <input onClick="addRow(this.form); output()" type="button" value="add new line" /> 




    </div>

    <p><input type="submit" name="ok" value="Save Changes"></p>
    </form>
</div>

and js:

function output(){
    var tableTotal = 0;
    qtyArr = new Array();
    priceArr = new Array();
    taxArr = new Array();
    $( "input[name^='qty']" ).each(function( index ) {
        qtyArr.push(parseInt($( this ).val()));
    });
    $( "input[name^='price']" ).each(function( index ) {
        priceArr.push(parseInt($( this ).val()));
    });
    $( "select[name^='tax']" ).each(function( index ) {
        taxArr.push(parseInt($( this ).val()));

    }); 
    for(i = 0; i< qtyArr.length; i++)
    {
        console.log(qtyArr[i] +"*"+ priceArr[i] + "*" + taxArr[i])
        rowTotal = qtyArr[i] * priceArr[i] * (1-taxArr[i] / 100);
        document.getElementById('result' + (i+1)).innerHTML = rowTotal;
        tableTotal+=rowTotal;
    }
    document.getElementById('result').innerHTML = "tableTotal: " + tableTotal;
}

function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
    output();
}

Answer 2

From a design perspective you could add classes to each product, one class which refers to a specific product and another class which refer to any product you want to add to your grand total.

You can then use jQuerys $.each function to cycle through each class type, get the inner text (or wherever you store the cost value) and add it up and display it in an output field.

Answer 3

As long as you use the same name for name labels you could use this:

function calcTotal () {
  var sum = 0;
  $('input[name=add_price]').each(function(id, el){
sum += $(el).val();
  });
  return sum;
}
total();