Easily count up totals based on class .count-this and data-option-price attribute.
1. Add count-this
class to quantity input.
<input type="number" class="count-this" data-option-price="&mvt:some_price;">
2. Create displays anywhere on the page using class auto-price-value
<span class="auto-price-value"></span>
3. Add script to page:
<script>
$('.count-this').on("change", function () {
var sum = 0;
$('.count-this').each(function () {
//sum of all price values of this into price
qty = $(this).val();
if (qty > 0) {
sum += +$(this).attr('data-option-price') * qty;
//sum = sum * qty;
}
});
var formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
formattedsum = formatter.format(sum);
$('.auto-price-value').html(formattedsum);
});
</script>
Option for Simple Input Total Counter
Using the input value and class only. This will add them up and display a total each time the input is changed. If they enter 8, 3, and 1, the total will be 12.
Load jquery before script.
<input type="number" class="hd-qty" name="num1">
<input type="number" class="hd-qty" name="num2">
<input type="number" class="hd-qty" name="num3">
<p>Total input: <span id="hd-num">0</span></p>
<script>
$(".hd-qty").on("input", function()
{
var sum = 0;
$('.hd-qty').each(function() {
sum += Number($(this).val());
});
$('#hd-num').html(sum);
});
</script>