Real time update subtotal in order form

Question

I'm trying to set up an order form, and I want to show the subtotal right next to the item, and I want it to update real time as they change it. I tried building a javascript to make this work, but couldn't figure it out.

<table>
  <tr>
    <td width="48"><strong>PRICE</strong></td>
    <td width="144"><strong>QTY</strong></td>
    <td width="84"><div align="center"><strong>SUBTOTAL</strong></div></td>
  </tr>
  <tr>
    <td>$7.00</td>
    <td><input name="Item1" type="number" id="Item1" max="5" min="0" value="0"></td>
    <td><div align="center"><span id="span_totalItem1">$0.00</span></div></td>
  </tr>
  <tr>
    <td>$9.54</td>
    <td><input name="Item2" type="number" id="Item2" max="5" min="0" value="0"></td>
    <td><div align="center"><span id="span_totalItem2">$0.00</span></div></td>
  </tr>
</table>

Possible duplicate of [jquery sum of multiple input fields if same class in one input](http://stackoverflow.com/questions/24126819/jquery-sum-of-multiple-input-fields-if-same-class-in-one-input) — Adjit, May 19 '16 at 20:07
Add the `onChange` bind to the input and write formula to calculate new vaue and update the subtotal. — αƞjiβ, May 19 '16 at 20:08
Please show us the JavaScript you say you tried so it doesn't look like you're just asking for someone to do the work for you. — j08691, May 19 '16 at 20:08
Where is the Javascript that you tried? the linked question is a jQuery version of this. — Adjit, May 19 '16 at 20:08
thanks j08691 for your condescending help. however Lucas assisted me. my issue was I didn't realize the $ amount was x and * I just has a *. I'm self taught, and obviously still learning. I also already searched as best I could in the older post to find where I was going wrong before posting here. and the example I gave was a dummy example, I still have to retype it into my program. This is one piece of many pages I'm trying to build. — ScudBud, May 19 '16 at 21:15
@adjit, this is not a duplicate for several reasons: the needed functionality is completely different, and here no jquery is asked.... — Erik, May 19 '16 at 22:41
@erik right that's why I retracted my close vote, but thought I'd leave the possible duplicate up as the logic may help — Adjit, May 19 '16 at 23:24

score 0 · Accepted Answer · answered May 19 '16 at 20:22

<script type="text/javascript">
function updateItem1() {
    var x = document.getElementById("Item1").value;
    document.getElementById("span_totalItem1").innerHTML = "$" + x*7;
}

function updateItem2() {
    var x = document.getElementById("Item2").value;
    document.getElementById("span_totalItem2").innerHTML = "$" + x*9.54;
}
</script>

And add the event oninput on your two inputs:

<table>
  <tr>
    <td width="48"><strong>PRICE</strong></td>
    <td width="144"><strong>QTY</strong></td>
    <td width="84"><div align="center"><strong>SUBTOTAL</strong></div></td>
  </tr>
  <tr>
    <td>$7.00</td>
    <td><input name="Item1" type="number" id="Item1" max="5" min="0" value="0" oninput="updateItem1()"></td>
    <td><div align="center"><span id="span_totalItem1">$0.00</span></div></td>
  </tr>
  <tr>
    <td>$9.54</td>
    <td><input name="Item2" type="number" id="Item2" max="5" min="0" value="0" oninput="updateItem2()"></td>
    <td><div align="center"><span id="span_totalItem2">$0.00</span></div></td>
  </tr>
</table>

Thanks Lucas! Works perfect. – ScudBud May 19 '16 at 21:08 — ScudBud, May 19 '16 at 21:08

Erik · Answer 2 · 2016-05-19T23:01:45.417

I'd like to add a bit to the accepted answer, as it may work great with only two products, but in case you'd have say 10 or 20, you don't want to write a function for each of them.

So it would be nice to have just one function, working on all products. Here an example working with 3 products:

<table>
  <tr>
    <td width="48"><strong>PRICE</strong></td>
    <td width="144"><strong>QTY</strong></td>
    <td width="84"><div align="center"><strong>SUBTOTAL</strong></div></td>
  </tr>
  <tr>
    <td class="price" data-amount=7>$7.00</td>
    <td><input class="productAmount" name="Item1" type="number" max="5" min="0" value="0"></td>
    <td><div align="center"><span class="total">$0.00</span></div></td>
  </tr>
  <tr>
    <td class="price" data-amount=9.54>$9.54</td>
    <td><input class="productAmount" name="Item2" type="number" max="5" min="0" value="0"></td>
    <td><div align="center"><span class="total">$0.00</span></div></td>
  </tr>
  <tr>
    <td class="price" data-amount=11.22>$11.22</td>
    <td><input class="productAmount" name="Item3" type="number" max="5" min="0" value="0"></td>
    <td><div align="center"><span class="total">$0.00</span></div></td>
  </tr>
</table>

and the javascript:

var productAmounts = document.getElementsByClassName("productAmount");

Array.prototype.forEach.call(productAmounts, update);

function update(val, i){
  val.addEventListener('input', function(){
    var x = val.value;
    document.getElementsByClassName('total')[i].innerHTML = "$" +
      (x*document.getElementsByClassName('price')[i].getAttribute("data-amount")).toFixed(2);
  });
};

https://jsfiddle.net/n859snjp/1/

Real time update subtotal in order form

2 Answers2