Every JQuery / Javascript Number formating doesn't work, Parsed out of Range

Question

im new to JS/jQuery & im stuck with this for days, no solution worked this far..

Code for debugging here: http://jsfiddle.net/qgw4ckmz/1

I already trying most of javascript number formatting, but none of them work in my case, What im tryng to achieve is thousand separator output, ex: 1000000 become 1,000,000, 1000 become 1,000 etc. it worked fine if the number is 100000 or below, but after 1000000, it shows error on browser console:
The specified value "1,000,000" cannot be parsed, or is out of range.

i tried this but doesnt work (only able to parse up to 100.000 ):

<script type="text/javascript">
$(document).ready(function(){
var totalsum = 0;
    $(".barangx").each(function(){
        var inputval = $(this).val();
        if($.isNumeric(inputval)){
            totalsum +=parseFloat(inputval);
        }
    });
    
    $('.totalx').val(totalsum.toLocaleString('id-ID'));
});

i also tried this code whis is mentioned here but the result are the same (only able to parse up to 100.000 ): http://www.mredkj.com/javascript/numberFormat.html


<script type="text/javascript">
$(document).ready(function(){

    function addCommas(nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

    var totalsum = 0;
    $(".barangx").each(function(){
        var inputval = $(this).val();
        if($.isNumeric(inputval)){
            totalsum +=parseFloat(inputval);
        }
    });

    totalsum = addCommas(totalsum);
    $('.totalx').val(totalsum);
});
</script>

COMPLETE CODE

<!DOCTYPE html>

<html lang="en">
<body>

<label>Val 1</label>
<div class="ml-auto"><input type="number" value="10000" class="input barangx" readonly step="0.01" id="id_form-0-total"></div>

<label>Val 2 - Change this fieild to 1000000</label>
<div><input type="number" value="10000" class="input barangx" step="0.01"></div>

<label>Val 1 + Val 2=</label>
<input type="number" name="total" step="0.01" class="input totalx" readonly required id="id_total">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".barangx").keyup(function(){
    var totalsum = 0;
    $(".barangx").each(function(){
        var inputval = $(this).val();
        inputval = inputval.replace(/,/g, "");
        if($.isNumeric(inputval)){
            totalsum +=parseFloat(inputval);
        }
    });
    totalsum = totalsum.toLocaleString('id-ID');
    $('.totalx').val(totalsum);
});
});
</script>
</body>
</html>

i think this may help you https://stackoverflow.com/a/34671427/11286971 using Number.toLocaleString() — Zaid abu khalaf, Nov 06 '20 at 11:13
@Zaidabukhalaf thats exactly i already tried on the desc above.. ```totalsum.toLocaleString('id')``` — Diand, Nov 06 '20 at 11:16
@RoryMcCrossan yeah, i already tried that too, same result... — Diand, Nov 06 '20 at 11:20
Given the error you need to remove the commas from the string before you pass it to `$.isNumeric()` — Rory McCrossan, Nov 06 '20 at 11:20
@RoryMcCrossan already tried that to, using ```inputval = inputval.replace(",", "");``` and ```inputval = inputval.replace(" ", "");``` — Diand, Nov 06 '20 at 11:26
In which case can you please add a working example of the problem to the question so we can debug it. — Rory McCrossan, Nov 06 '20 at 11:29
@RoryMcCrossan here it is: https://jsfiddle.net/a6L9owty/1/ try to edit the editable row, everytime its filled more than 100.000, it doesn work. — Diand, Nov 06 '20 at 11:57
What javacript implementation are you using? x=2000000; x.toLocaleString(); is working in latest Chrome and node.js — netizen, Nov 06 '20 at 12:31
@netizen please check the complete code here: https://jsfiddle.net/qgw4ckmz/1/ — Diand, Nov 06 '20 at 12:52
In the provided fiddle, the error only occurs on `$('.totalx').val(totalsum.toLocaleString('id-ID'))` - the `id-ID` format of the number is not recognised by that input type — freedomn-m, Nov 06 '20 at 14:03
@freedomn-m but why it's working for value lower than 100.000? — Diand, Nov 06 '20 at 14:39

score 3 · Accepted Answer · answered Nov 06 '20 at 13:16

3

Remove the type="number" from the target input element

answered Nov 06 '20 at 13:16

netizen

1,028
7
19

it's working! but is there other way? type="number" is generated and necessary for the backend processing. – Diand Nov 06 '20 at 13:24
1

If it's needed by the backend then you could have a hidden number field (without `.` / `,` format) and a separate display label. Is your backend expecting "1000" or "1.000"? It should be expecting an unformatted number. – freedomn-m Nov 06 '20 at 14:04
@freedomn-m actually it's expecting ```1000```. the ```1.000``` only for user readability, so i revert the value back without comma or dot. but im using Python in the backend, so no problem. there just no way to remove or override properties ```type="number"``` because it's auto generated by the model forms. – Diand Nov 06 '20 at 14:37
If it's generated automatically, you should be able to create it as hidden - or change it post creation via js. From a UX/UI perspective you don't really want an *input* there anyway as it's not something you're "input"ing data into – freedomn-m Nov 06 '20 at 14:40

Every JQuery / Javascript Number formating doesn't work, Parsed out of Range

1 Answers1