0

I'm trying to create a checkout menu with jQuery and HTML and I am having trouble getting the input box for the item quantity to behave predictably. When I use the cursor to change the input value, the output for the 'price' variable is "NaN". When I use the arrow keys, the price updates once, but fails after the first change. How do I get the number input value, multiply it by the text (the price) in the <p> tag, and update the text every time the number is increased or decreased? I've got this much so far on my own:

Here is my HTML:

<input id="quantity" size="30" type="number" value="1" />
<p id="total">29.99</p>

And my JS:

$(document).ready(function() {
  function updatePrice() {
  var num = parseInt($("#quantity").val());
  var price = (num) * parseFloat($("#total").text());
  var total = price.toFixed(2);
  $("#total").replaceWith(total);
}
$(document).on("change, keyup, input", "#quantity", updatePrice);
});

JS Fiddle.

The Process
  • 5,913
  • 3
  • 30
  • 41
PiraX
  • 73
  • 1
  • 2
  • 7
  • https://jsfiddle.net/k5om53o8/1/ like this? – axel.michel Mar 20 '16 at 20:00
  • That doesn't update when the number is changed using the cursor. It also continuously updates without refreshing so pressing the enter button over and over raises the price even if the number in the box stays the same. – PiraX Mar 20 '16 at 20:03
  • 2
    you're right, didn't get that, fix is here: https://jsfiddle.net/k5om53o8/2/ – axel.michel Mar 20 '16 at 20:10
  • If you post this as an answer, I'll acknowledge it as the correct answer. I do have a follow-up question, if you don't mind. Suppose I have several input boxes and several price listings (as is typical in a checkout menu), how do I use index() with this so that I can ensure the price for one item is only changed for that item if the quantity box for that item is changed? I plan on adding up all of the prices in the `

    ` tags to get a total price.

     – PiraX Mar 20 '16 at 20:15
  • Can you provide some markup as an example? – axel.michel Mar 20 '16 at 20:18
  • Something like this: https://jsfiddle.net/u0f3tgku/ (updated) – PiraX Mar 20 '16 at 20:22

1 Answers1

3

There are only a few changes required to make your code work. Be aware that you still need to handle negative numbers (by field properties?) as well as 0.

$(document).ready(function() {
    // grep the price only once...
    var price = parseFloat($("#total").text());        
    function updatePrice() {        
        var sum, num = parseInt($(this).val(),10);
        // if we have a number
        if(num) {
          // update info text
          sum = num * price;
          $("#total").text(sum.toFixed(2));
        }
    }
    $(document).on("change, mouseup, keyup", "#quantity", updatePrice);
});

Fiddle is here.

axel.michel
  • 5,764
  • 1
  • 15
  • 25
  • @PiraX have a look at this https://jsfiddle.net/2j1e22me/2/ for multiple fields, I have modified the 'ID' price to a class 'price' because an ID has to be unique. – axel.michel Mar 20 '16 at 20:33
  • Ah, you're a godsend. Thank you so much. – PiraX Mar 20 '16 at 20:37