Quantity input and simple refresh

I have set an input field with the quantity button. An example:

<input type="text" name="quantityorder" id="quantities" class="form-control" placeholder="Add order quantity" />

As I try to add a simple text with the quantity, how to manage using JavaScript as amount will be adjusted according to the ordered quantity?
Your final order amount is the following: XXX USD.

Hi,

Not sure I have understood the question correctly, but maybe something like this?

<input type="text" id="quantities" placeholder="Add order quantity" />
<p>Your final order amount is the following: <span id="result">0</span> USD</p>

<script>
  const input = document.getElementById('quantities');
  const result = document.getElementById('result');
  input.addEventListener('keyup', function () {
    result.textContent = this.value;
  });
</script>

I’m not sure but can be set also refresh action as I put 10 as quantities and if I have the price 499 USD, it should be shown on the instant basis also 100 * 499 = 4990 USD

Behaviour is like usual eCommerce refreshed amount.

An example: https://webkul.com/blog/opencart-processes-add-cart/
I see a solution: https://codepen.io/jjxbag/pen/vNYZPJ

Ah ok, I see what you’re aiming at. No idea if you’re using jQuery, so in case not, here’s the same thing in vanilla JS:

const input = document.getElementById('quantities');
const result = document.getElementById('result');
input.addEventListener('keyup', function () {
  const total = Number(this.value) * 4.99
  result.textContent = total.toFixed(2);
});

However, before you say “Thanks! Job done”, please take a moment to familiarize yourself with the pitfalls of working with monetary values in JavaScript (e.g. if I type in “a” into the text field, my order amount is NaN),

This article does a good job of presenting the dangers and the possible solutions:

You might also like to investigate a library such as Dinero.js: https://dinerojs.com/

I see it is not only an issue with the formatted value. When I set the price 399,20 and try to calculate using EUR value it will be also NaN€
Can be the final number formatted into EU standards not US?
The final amount is showing 4189.5€ but the correct is 4.189,50 €

Maybe toLocaleString is what you’re looking for?

I have read DINERO:

When I validate an issue it is an issue with the NaN as 1,2 quantity will push the final amount into NaN status .

How to add Dinero script and code?

$(document).ready(function(){
	$(".checkout").on("keyup", ".quantity", function(){
		var price = +$(".price").data("price");
		var quantity = +$(this).val();
		$("#total").text("$" + price * quantity);
                return total.toLocaleString('de-DE');
	})
})

NaN is a property of the global object. In other words, it is a variable in global scope. The initial value of NaN is Not-A-Number — the same as the value of Number. … There are five different types of operations that return NaN…

In similar circumstances, I simply use a JavaScript regular expression to delete any non-numeric characters from the input field’s value immediately on keyup using:
replace(/[^0-9]/g, '')
If the value string then has no characters, I set it to ‘0’.

1 Like

I’m new to this. I kindly ask you to post the whole code on the above suggestion:

$(document).ready(function(){
	$(".checkout").on("keyup", ".quantity", function(){
		var price = +$(".price").data("price");
		var quantity = +$(this).val();
		$("#total").text("$" + price * quantity);
	})
})

Try this:

Sorry, I don’t do jQuery :grinning:

Thank you for all messages. I will close this thread.