根据输入数量（数量）变化计算价格

Question

I have multiple selects that populate form with products and prices. Then I am calculating full price of all products and that works fine but there is number input field in form for quantity and I cant calculate price based on products quantity.

Here is fiddle: http://jsfiddle.net/fpm971fb/

I tried with this code:

jQuery('input.selected-product-quantity').bind('focus blur select change click dblclick mousedown mouseup mouseover mousemove mouseout keypress keydown keyup', function(){
       pr=jQuery('.priceClass').text();
       nr=jQuery('.selected-product-quantity').val();
       calc=pr*nr;
       console.log(pr+"*"+nr);
       jQuery('.priceClass').html(calc);
});

But when this code is entered inside on change function (see in fiddle) it shows huge numbers like it adds one to another. And when its outside that function then nothing happens.
How can I properly calculate full price with quantity?

Answer 1

Try This :

$('input.selected-product-quantity').change(function(){
  var quantity = $(this).val();
  var price = $('.priceClass').text();
  var calprice = parseInt(price) * parseInt(quantity);
  $('.priceClass').text(calprice);
});

Answer 2

Try converting your input values to number before any calculation :

$('input.selected-product-quantity').on('change', function(){
    var pr = Number($('.priceClass').text());
    var nr = Number($('.selected-product-quantity').val());
    var calc = pr * nr;
    console.log(pr+"*"+nr);
    $('.priceClass').html(calc);
});

Answer 3

Try putting the following code inside a function named TotalPrice() ,

function TotalPrice(){
    var sum = 0;
    jQuery('.priceClass').each(function () {
    sum += Number(jQuery(this).text() * parseInt($(this).next().next().children("input").val()));
        console.log(sum);
    });
    jQuery(".fullPrice").html("<b>Full price: </b>" + sum); 
}

and Then call it from inside the select element change (Where this function was previously coded).

Now as the elements are dynamically loaded you are facing a problem to bind events with them. So I suggest to be little tricky about it. Try this way,

$("body").on("keyup", function(){
    TotalPrice();
});

When the body changes (which is a already loaded element in DOM) you call the TotalPrice() function and calculate total price. It's not the best solution I guess. So I appreciate suggestion.

jsFiddle