Modified string value into local formatted value

[toplisek]

I have tried to validate script to add QTY * PRICES = THE FINAL AMOUNT using the script:

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

How to manage also formatted string uisng Number.toLocaleString() into EU altered string? Is it the correct altered string?
Values 1590 EUR should be 1.590 EUR

Need help.

$(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');
})
})

Source code: [codepen.io...]

[NickMNS]

There are two issue with your code.
1- "total" must be a number, currently it is a string, since you are concatenating "$" to the amount.
2- You must be explicit with "toLocalString" and specify that you want it to return a currency.

See below:

const total = 200
console.log(
 total.toLocaleString(
 'de-DE',
 { style: 'currency', currency: 'EUR' }
)

working demo:
[jsfiddle.net...]

for information see:
[developer.mozilla.org...]

Also one important warning. Remember that javascript (jQuery) runs on the users computer and thus a malicious user can modify the code. Do not base your "sales price" on the calculated value, send both the unit price and the quantity to the server and validate both values before calculating the actual sales price and accepting the order. I'm not saying don't do the calculation, it is fine to show the result to the user but do not rely on the calculated value for determining the actual value of the purchase.

[toplisek]

Your code is working. You are excellent developer. Thank you for the message! I have modified to de-DE and it works now.

How to delete any non-numeric characters from the input field’s value immediately on keyup as 1,2 for the quantity will add NaN status.

[NickMNS]

Your suggested code puts € in front of number.

Not really, it is the standard for 'de-DE' to show the currency after the number. If you want it in front you can change it to "en-US". Note that toLocalString() is intended to be used in conjunction with the browser settings such that a user with a browser set to en-US will see it displayed in their preferred format whereas a de-DE user will see it in theirs.

You can use window.navigator.language to get the browser language setting.
See demo for details:
[jsfiddle.net...]

[toplisek]

I have tested NaN status if there is an issue with the quantity like 1,2 or 1.2.
Should we add Listener like q.addEventListener("keyup", allowOnlyNumbers);?

var language = window.navigator.userLanguage || window.navigator.language;
$(".checkout").on("keyup", "#quantity", allowOnlyNumbers, function()
{
var price = +$(".price").data("price");
var quantity = +$(this).val();
function allowOnlyNumbers() {
q.value = q.value.replace(/[^0-9]/g, "");
if(q.value=="") q.value = "0";
document.getElementById("result").innerText = (q.value * price).toFixed(2);
}
var total = (price * quantity).toLocaleString(
// 'de-DE',
language,
{style: 'currency', currency: 'EUR'}
)
$("#result").text(total);
}
)

[NickMNS]

I have tested NaN status if there is an issue with the quantity like 1,2 or 1.2.
Should we add Listener like q.addEventListener("keyup", allowOnlyNumbers);?

No, that is way too complicated. Just use HTML to do this. Set your input type to "number" and it will prevent the user from entering anything that isn't a number. So a US user will be prevented from using "," but a German user can use "," as the decimal delimiter but can't use ".". Most important is that by using "number" you are certain that the "value" returned by the input will be a number and your script will not throw an error or NaN.

You can then also add the "min" attribute, and the "step" attribute. Adding a step of 0.1, will prevent the user from entering a value 1.11.

<input type="number" class="quantity" value="1" min="1" step="0.1">

Updated demo:
[jsfiddle.net...]

[toplisek]

I will need to use Javascript as I use type="text" due to validation control and in the future it can be also 1,2 as quantity when we talk about meters etc.
Can you post the whole code where I missed q.value as I tested and it does not work.

[NickMNS]

I use type="text" due to validation control

Don't. Use "number" and update your validation control by converting the number to a string by adding number.toString().