Input field that calculates tier pricing

Question

I'm trying to create a calculator with Javascript and with the help of JSfiddle I am pretty far but I need some extra's that I am struggling with.

This is the code so far:

$(function() {
  var tier_prices = [
        { minQty: 100, unitPrice:2.57 },
        { minQty: 150, unitPrice:1.86 },
        { minQty: 200, unitPrice:1.50 }
  ];
  $('#quantity').on("change input keyup", function() {
    var qty = +this.value;
    var price;
    for (var i = 0; i < tier_prices.length && qty >= tier_prices[i].minQty; i++) {
      price = tier_prices[i].unitPrice;
    }
    $('#price_output').text(price * qty);
  });
});

<input type="number" id="quantity" name="quantity" min="100" max="500" value="100">
<p id="price_output"></p>

<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>

I have two issues:

1. When minQty is lower than 100 I get the message "NaN". The best situation is that this is not possible and when you try to lower the number to 100 it is stuck to 100. Even when to try to type it it will switch back to 100. The other scenario is that there will be dislayed a message like "it is not possible to go lower than 100". Also the default starting situation should be with 100 and the calculated price that should be shown with 100.

2. I want to display the output in Euro's comma seperated like this: €257,20 and not like 257.20.

I already solutions like this on Stackoverflow: Change dots to commas

but can't get it to work properly.

I am very close but those two things are hard.

Anybody has an idea how I can accomplish this?

Answer 1

You can try the following way using the input event only:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="quantity" name="quantity" min="100" max="500" value="100">
<p id="price_output"></p>
    <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
<script>
$(function() {
  var tier_prices = [
    { minQty: 100, unitPrice: 2.57 },
    { minQty: 150, unitPrice: 1.86 },
    { minQty: 200, unitPrice: 1.50 }
  ];
  var minQty = 100; //set the minimum quantity

  $('#quantity').on("input", function() {
    var qty = +this.value;
    if (isNaN(qty) || qty < minQty) {
      this.value = minQty; //reset value to minimum
      $('#price_output').text("It is not possible to go lower than 100");//show the message
      return;
    }
    var price;
    for (var i = 0; i < tier_prices.length && qty >= tier_prices[i].minQty; i++) {
      price = tier_prices[i].unitPrice;
    }
    var totalPrice = price * qty;
    var formattedPrice = "€" + totalPrice.toFixed(2).replace(".", ",");
    $('#price_output').text(formattedPrice);
  });

  //trigger the calculation
  $('#quantity').trigger("input");
});

</script>