Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>An id has to be unique on a page, you have multiple input's with the same id on the page. Hence why it is only every performing the calculation on the first input. Your best bet is to append a numerical value to 'baseprice' and 'units' input to distinguish each row. In addition pass the 'this' keyword into the calc function to reference the element that has triggered the function.</p> <p>Example row:</p> <pre><code> &lt;tr&gt; &lt;td&gt; &lt;input id="units_1" name="units_1" type="hidden" value="10" /&gt; &lt;!-- attach an onchange handler to baseprice_1, when a change is made trigger the calc function. --&gt; &lt;input id="baseprice_1" name="baseprice_1" type="text" onchange="calc(this);" /&gt; &lt;input id="sub_1" name="sub_1" type="text" /&gt; &lt;/td&gt; &lt;/tr&gt; </code></pre> <p>JS:</p> <pre><code>/* An array to store the subtotals. */ grandTotalArr = []; function calc(el){ /* el = this (which is a reference to baseprice_1) */ baseprice=parseInt(el.value); units=parseInt(document.getElementById("units" + el.id.replace('baseprice', '')).value); x=baseprice*units; document.getElementById("sub" + el.id.replace('baseprice', '')).value=x; /* Store the subtotal in the grandTotalArr using it's id as the key. */ grandTotalArr["sub" + el.id.replace('baseprice', '')] = x; /* Implode all values with the + operator, and evaluate as a JS expression. Once evaluated, update the grand total. */ document.getElementById('grand_total').value = eval(grandTotalArr.join('+')); } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload