jQuery price increment with html number

Question

I am creating an e-commerce, I would like to put a dynamic price that changes based on the amount of a selected item. I have no idea how to do, someone could help me?

This is my situation:

https://jsfiddle.net/sucwcokv/

<input type="number" min="0" value="0" title="Qta" class="input-text qty text" />

There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs.I would suggest that you find a development forum (perhaps [Quora](http://www.quora.com/Computer-Programming)?) to work out generalities. Then, when/if you have specific coding issues, come back to StackOverflow and we'll be glad to help. — Jay Blanchard, Dec 08 '15 at 13:29
I hope that by "creating an e-commerce" you mean some simple one-product website or something similar, since a full-on e-commerce site will not be particularly secure on this skill level. — Roope, Dec 08 '15 at 13:31
i have multiple item, from 290,54€ and 315,71€. I create a demo on fiddle in my post — Eugenio Segala, Dec 08 '15 at 13:32

Marcel Wasilewski · Answer 1 · 2015-12-08T14:04:53.250

I hope i understood right and this is what you meant:

https://jsfiddle.net/sucwcokv/1/

I added some JQuery to it:

$(document).ready(function() {
    var id = $(".input-text").attr("id");
    $('input#' + id).on('change', function() {
      $(".amount." + id).html(this.value);
    })
})

Note

I would not recommend using it for some kind of important e-commerce data. It's a security risk. Be sure to secure all things that are beeing made with some sort of jquery also with a server sided language (i think in most case it is PHP) so the user has no chance to manipulate anything.

score 0 · Accepted Answer · answered Dec 08 '15 at 14:26

Here's a fiddle I made:

https://jsfiddle.net/sucwcokv/4/

It adds the total, but I would echo what @Marcel Wasilewski said, it is not a good idea to run this kind of price calculation only in javascript, as it'd be quite open to user manipulation.

One problem with the fiddle; it seems to have a problem with the accuracy of the number, it adds recurring 9's sometimes, for instance. I've seen this in other languages when variables are converted between types, but I haven't yet figured it out for this. Could someone confirm what causes this? Any help would be appreciated.

I used JQuery to speed things up, but if you want pure JS... you may need to look into converting it:

$(document).ready(function() {

  var subtotals = [];

  $('.input-text').change(function() {

    updateTotal();

  });

});

function getRowSubtotal(rowToTotal) {
  var currentQty = $(rowToTotal).find('input').val();

  var thisPrice = $(rowToTotal).find('ins').find('span.amount').text();

  thisPrice = thisPrice.replace('€', '');
  thisPrice = thisPrice.replace(',', '.');

  return Number(thisPrice) * currentQty;
}

function updateTotal() {

  subtotals = [];

  $('.input-text').each(function() {
    var thisRow = $(this).parent().parent().parent();

    subtotals.push(getRowSubtotal(thisRow));
  });

  var total = 0;
  for (var i = 0; i < subtotals.length; i++) {
    total += subtotals[i];
  }

  $('#total').text('Total: ' + total + '€');

  console.log(total);

}

It works perfectly, but in my site say "NaN", i paste my page here: https://gist.github.com/anonymous/f62001e5d7e156c05984 you can see your script before — Eugenio Segala, Dec 08 '15 at 14:57
I'm afraid I don;t really have time to look through all of your code; Stack Overflow is really intended more for specific questions rather than broad 'fix my code' type issues. NaN is 'not a number', so as a guess, it would seem that the variable `thisPrice` is not able to be converted to a number — OliverRadini, Dec 08 '15 at 15:13
you're right, thank you anyway, now i do several tests, one last thing, how can I limit the number to 2 decimal places? example: 15,938293 in 15,93 — Eugenio Segala, Dec 08 '15 at 15:28
Here is a useful thread which discusses number rounding in Javascript: http://stackoverflow.com/questions/1726630/javascript-formatting-number-with-exactly-two-decimals — OliverRadini, Dec 08 '15 at 15:40

jQuery price increment with html number

2 Answers2

Note