INPUT: Total Price Counter for One or More Quantity Inputs

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>