Calculate price based on input number (quantity) change

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?

Use a change event on your `input` selector, then perform a calculation and update the DOM. I would also suggest that you use `var` for you variables rather than assigning to the global space. — Xotic750, Jan 04 '15 at 11:09
why you writing jQuery variable all where instead of using $?, or ( function($){ ... })(jQuery); — rab, Jan 04 '15 at 11:10

score 0 · Answer 1 · answered Jan 04 '15 at 11:18

0

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);
});

answered Jan 04 '15 at 11:18

Hasan Al-Natour

1,936
2
14
22

1

parseInt without specifying the radix as second parameter is risky business :-) see http://stackoverflow.com/questions/850341/how-do-i-work-around-javascripts-parseint-octal-behavior – sodawillow Jan 04 '15 at 11:22
you mean the radix its Optional and its A number (from 2 to 36) that represents the numeral system to be used. – Hasan Al-Natour Jan 04 '15 at 11:24
parseInt('09'); //equals 0 :-) I'm just saying OP should be aware of this if he uses parseInt – sodawillow Jan 04 '15 at 11:27
i just tried parseInt('0') = 0 and parseInt('09') = 9 in google chrome console , what you are saying is not correct ! – Hasan Al-Natour Jan 04 '15 at 11:45

score 0 · Answer 2 · answered Jan 04 '15 at 11:21

0

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);
});

answered Jan 04 '15 at 11:21

sodawillow

12,497
4
34
44

when I do this result is like in question, huge numbers if its placed inslide first on change and nothing happens if its outside – Jakob Jan 04 '15 at 11:32
Sorry cannot test further on a low battery mobile :-) maybe later today – sodawillow Jan 04 '15 at 11:53

Md Ashaduzzaman · Accepted Answer · 2015-01-04T11:50:31.877

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

this works fine, but I need it to be visible live, when new quantity is entered — Jakob, Jan 04 '15 at 11:33

Calculate price based on input number (quantity) change

3 Answers3