Have you ever encountered the problem of formatting INR currency input in an HTML form? If you have, then you know how frustrating it can be for an end user to manually insert commas in the right places to properly format large INR values. Luckily, there’s a simple solution to this problem using JavaScript.
I recently faced this problem while building an HTML form that required users to enter INR values. After doing some research, I found a solution that worked perfectly for me. In this article, I’ll walk you through the steps I took to format the INR currency input in my HTML form. But first let’s see the demo
Demo:
First, I added an input field to my HTML form with an ID of “inr-input” and a placeholder value of “Enter INR value”. This is where the user will input their INR value.
<!DOCTYPE html>
<html>
<head>
<title>INR Input</title>
</head>
<body>
<input type="text" id="inr-input" oninput="formatINR()" placeholder="Enter INR value">
<script>
// JavaScript code goes here
</script>
</body>
</html>Next, I added a JavaScript function called “formatINR” that will format the user’s input into the correct INR currency format. This function first gets the input value from the “inr-input” field and removes all non-digit characters using a regular expression. It then converts the resulting value to a number.
function formatINR()
{
var inrInput = document.getElementById('inr-input');
var inrValue = inrInput.value;
// Remove all non-digits and convert to number
var numValue = parseFloat(inrValue.replace(/[^\d]/g, ''));
// More code goes here
}The next step is to check if the value is a number using the isNaN function. If the input value is not a number, then the function will do nothing. However, if the input value is a number, then the function will convert it to a string with commas for thousands, lakhs, crores, etc., using the toLocaleString function.
function formatINR()
{
var inrInput = document.getElementById('inr-input');
var inrValue = inrInput.value;
// Remove all non-digits and convert to number
var numValue = parseFloat(inrValue.replace(/[^\d]/g, ''));
if (!isNaN(numValue))
{
// Convert number to string with commas for thousands, lakhs, crores, etc.
var inrString = numValue.toLocaleString('en-IN', {
minimumFractionDigits: 0,
maximumFractionDigits: 0
});
inrInput.value = inrString;
}
}Finally, I added an oninput attribute to the “inr-input” field that will call the formatINR function every time the user inputs or changes a value in the field.
<input type="text" id="inr-input" oninput="formatINR()" placeholder="Enter INR value">And that’s it! With just a few lines of code, I was able to format INR currency input in my HTML form without any hassle. The resulting code is both easy to read and easy to maintain.
Here’s the complete code:
<!DOCTYPE html>
<html>
<head>
<title>INR Input</title>
</head>
<body>
<input type="text" id="inr-input" oninput="formatINR()" placeholder="Enter INR value">
<script>
function formatINR()
{
var inrInput = document.getElementById('inr-input');
var inrValue = inrInput.value;
// Remove all non-digits and convert to number
var numValue = parseFloat(inrValue.replace(/[^\d]/g, ''));
if (!isNaN(numValue))
{
// Convert number to string with commas for thousands, lakhs, crores, etc.
var inrString = numValue.toLocaleString('en-IN', {
minimumFractionDigits: 0,
maximumFractionDigits: 0
});
inrInput.value = inrString;
}
}
</script>
</body>
</html>As you can see, the solution to this problem is quite simple and can be implemented using just a few lines of code. By following the steps outlined in this article, you can easily add the ability to format INR currency inputs with commas.
If you’re a developer who has been struggling with this issue, I hope that this article has been helpful to you. By using the code provided, you can easily add this functionality to your HTML and JavaScript projects.
Remember, formatting currency inputs is an important aspect of creating a user-friendly interface for your applications. By providing users with clear and easy-to-read input fields, you can improve the overall user experience and make your applications more accessible to a wider audience.
So go ahead, give this code a try, and see how it works for you. And if you have any questions or comments, feel free to leave them in the comments section below.