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.

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.

• javascript
• jquery
• html
• input
• numbers

Share Improve this question Follow edited Mar 20, 2016 at 19:57 The Process 5,95333 gold badges3232 silver badges4141 bronze badges asked Mar 20, 2016 at 19:48 PiraXPiraX 9311 gold badge22 silver badges77 bronze badges 6

• jsfiddle/k5om53o8/1 like this? – axel.michel Commented Mar 20, 2016 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 Commented Mar 20, 2016 at 20:03
• 2 you're right, didn't get that, fix is here: jsfiddle/k5om53o8/2 – axel.michel Commented Mar 20, 2016 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 <p> tags to get a total price. – PiraX Commented Mar 20, 2016 at 20:15
• Can you provide some markup as an example? – axel.michel Commented Mar 20, 2016 at 20:18

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 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.