Калькулятор корзины

[Dark Wizard]

Подскажите функцию calc() для расчёта количества/суммы пожалуйста.

<form>
<input type="hidden" name="price[1]" value="10"><input type="number" class="zinput" name="item[1]" value="0" onchange="calc();"><br>
<input type="hidden" name="price[2]" value="15"><input type="number" class="zinput" name="item[2]" value="0" onchange="calc();"><br>
...
<input type="hidden" name="price[n]" value="5"><input type="number" class="zinput" name="item[n]" value="0" onchange="calc();"><br>
</form>

<div id="sum">Кол-во: 0<br>Сумма: 0</div>

Можно на jquery, но лучше без. Чтобы перебирало все элементы и сохраняло из заполненных 2 переменных - общие цену и количество.

Просто для суммы у меня работает такая функция:

function calc(){
      var total = 0;
      $('input.zinput').each(function(i,elem) {
        var val = parseFloat($(this).val());
        if(isNaN(val)) val = 0;
        total = total + val;
      });
      $('#sum').html(total);
}

но как её переделать ещё и на учёт количества не соображу...

 

[Dark Wizard]

В общем получилось сделать как описано тут Для просмотра ссылки Войди или Зарегистрируйся

 

[Absolute]

Можно на jquery, но лучше без. Чтобы перебирало все элементы и сохраняло из заполненных 2 переменных - общие цену и количество.

  document.addEventListener('DOMContentLoaded', ()=>{
    var q = document.querySelectorAll('.zinput');
    function sum(){
      var quantity = 0, total = 0;
      q.forEach(($this)=>{
       quantity += ~~$this.previousSibling.value;
        total += ~~$this.value;
      });
      document.getElementById('sum').innerHTML = quantity + ' | ' + total;
    }
    q.forEach((v,i) =>{
     q[i].addEventListener('input', ()=>{
       sum();
     });
    });
  });