How to get numbers to Indian rupees format in web page like 10,000.00

Question

How do I make it make when I enter the number it comes with Indian rupees format and the result also pastes on the total input box in the Indian rupees format? Please help with this.

<input onblur="findTotal()" type="text" name="qty" id="qty1"/><br>
<input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
<input onblur="findTotal()" type="text" name="qty" id="qty3"/><br>
<input onblur="findTotal()" type="text" name="qty" id="qty4"/><br>
<input onblur="findTotal()" type="text" name="qty" id="qty5"/><br>
<input onblur="findTotal()" type="text" name="qty" id="qty6"/><br>
<input onblur="findTotal()" type="text" name="qty" id="qty7"/><br>
<input onblur="findTotal()" type="text" name="qty" id="qty8"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>

Here the javascript

<script type="text/javascript">
function findTotal(){
    var arr = document.getElementsByName('qty');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('total').value = tot;
}

</script>

Possible duplicate of [HTML code for INR](https://stackoverflow.com/questions/3430242/html-code-for-inr) — Prerak Sola, Jan 15 '19 at 09:55
Duplicate of https://stackoverflow.com/questions/16037165/displaying-a-number-in-indian-format-using-javascript ? — Eponyme Web, Jan 15 '19 at 09:57
@PrerakSola no i am asking for comma after three digits like when i enter the 10000 number it should be in 10,000.00 format that is my issue. — Chiru, Jan 15 '19 at 10:04
@EponymeWeb could you please edit given script for that format, i am struggling to do that — Chiru, Jan 15 '19 at 10:08
@AlexanderWigmore Yes you post the correct answer, Thank you.. Thank yo so much — Chiru, Jan 15 '19 at 10:11
@AlexanderWigmore And i have another doubt how We make same format For This $(function() { $("#total, #total1").on("keydown keyup", sum); function sum() { $("#subt").val(Number($("#total").val()) - Number($("#total1").val())); } — Chiru, Jan 15 '19 at 10:20

score 2 · Accepted Answer · answered Jan 15 '19 at 10:04

You can use the Intl.NumberFormat method to handle it all for you pretty much, I've created the demo below.

It's similar to your existing code, except it passes the values through the number formatter first.

var formatter = new Intl.NumberFormat('en-IN', {
  style: 'currency',
  currency: 'INR',
  minimumFractionDigits: 2,
});
//formatter.format(2500); /* $2,500.00 */
function findTotal(){
    var arr = document.getElementsByName('qty');
    var tot = 0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('total').value = formatter.format(tot);
}

<input onkeyup="findTotal()" type="text" name="qty" id="qty1"/><br>
<input onkeyup="findTotal()" type="text" name="qty" id="qty2"/><br>
<input onkeyup="findTotal()" type="text" name="qty" id="qty3"/><br>
<input onkeyup="findTotal()" type="text" name="qty" id="qty4"/><br>
<input onkeyup="findTotal()" type="text" name="qty" id="qty5"/><br>
<input onkeyup="findTotal()" type="text" name="qty" id="qty6"/><br>
<input onkeyup="findTotal()" type="text" name="qty" id="qty7"/><br>
<input onkeyup="findTotal()" type="text" name="qty" id="qty8"/><br>
Total : <input type="text" name="total" id="total"/>

For browser support, please see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat#Browser_compatibility

score 1 · Answer 2 · answered Jan 15 '19 at 10:11

1

You can do this to get the string in INR currency format:

function formatINR(x){
  return x.toLocaleString('en-IN');
}

var testString = 123342;
alert(formatINR(testString));

answered Jan 15 '19 at 10:11

Prerak Sola

9,517
7
36
67

how to do the same format For Given Script `` – Chiru Jan 15 '19 at 10:42
Try this: `$("#subt").val((Number($("#total").val()) - Number($("#total1").val())).toLocaleString('en-IN'));` – Prerak Sola Jan 15 '19 at 10:46
if you have any idea for converting Indian rupees format to word like when i enter 10,000 that shows ten thousand i have the script that gives result as like ten lacks. please give some idea or script – Chiru Jan 15 '19 at 11:09

score 0 · Answer 3 · answered Sep 10 '20 at 16:37

0

Here is simple way

function toIndianRs($number ) {
  return (isNaN(parseInt($number))) ?  0 : /*'₹' + */ parseInt($number).toLocaleString('en-IN')
}

answered Sep 10 '20 at 16:37

dipenparmar12

3,042
1
29
39

score -1 · Answer 4 · answered Jan 15 '19 at 10:25

As already shown ( I had already started so... ) the Intl.NumberFormat method has lots of flexibility when dealing with all manner of numbers. A re-written demo below shows how it might be used and removes the horrible inline function calls '-)

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Indian Rupees</title>
        <style>
            form{
                width:50%;float:none;margin:2rem auto;padding:1rem;box-sizing:border-box;
            }
            form > input{
                width:100%;padding:1rem;margin:0.25rem;box-sizing:border-box;
            }
            output{
                display:block;width:50%;padding:1rem;box-sizing:border-box;float:none;margin:1rem auto;text-align:center;
            }
        </style>
        <script>
            /*
                https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
            */
            const formatcurrency=function(i){
                return new Intl.NumberFormat( 'hi-IN', { style:'currency', currency: 'INR' } ).format( parseFloat( i ) );
            };



            document.addEventListener('DOMContentLoaded',function(e){
                let out=document.querySelector('output');
                let col=document.querySelectorAll( 'form > input[name="qty[]"]' );


                col.forEach( input => {
                    input.addEventListener( 'blur', function(e){
                        let total=0;
                        col.forEach( function(e){
                            if( e.value ) total += parseFloat( e.value )
                        });
                        out.innerText=formatcurrency( total );
                    }, false );
                } )
            },false);
        </script>
    </head>
    <body>
        <output></output>
        <form>
            <input type='number' name='qty[]' />
            <input type='number' name='qty[]' />
            <input type='number' name='qty[]' />
            <input type='number' name='qty[]' />
            <input type='number' name='qty[]' />
            <input type='number' name='qty[]' />
            <input type='number' name='qty[]' />
            <input type='number' name='qty[]' />
        </form>
    </body>
</html>

How to get numbers to Indian rupees format in web page like 10,000.00

4 Answers4

Here is simple way

Related