Multiplying 2 formatted large numbers shows no result in Chrome

Question

This code works beautifully in FireFox but for large numbers, this result doesn't show up in Chrome or Edge - and no error in console. Any idea why this works specifically in FireFox ?

<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js'></script>    
</head>
<body>

    <input type="text" name="Customers2" id="Customers2" maxlength="11" class="number" value="" placeholder="Please enter a number"/>
    <input type="text" name="MonetarySpend" id="MonetarySpend" maxlength="11" class="number" value="" placeholder="Please enter a dollar amount"/>
    <input type="text" disabled="disabled" name="MarketSize" id="MarketSize" maxlength="11" value=""/>

<script>                
$(document).ready(function()
{
    $("#Customers2,#MonetarySpend").on("change", function()
    {
        /* http://stackoverflow.com/questions/12559208/how-to-remove-comma-from-number-which-comes-dynamically-in-tpl-file */
        var c2 = $("#Customers2").val();
        c2 = c2.replace(/\,/g,'');
        c2 = parseInt(c2,10);

        var ms = $("#MonetarySpend").val();
        ms = ms.replace(/\,/g,'');
        ms = parseInt(ms,10);                        

        var MarketSize = c2 * ms;
        $("#MarketSize").val(MarketSize);
        $('#MarketSize').val(commaSeparateNumber(MarketSize));
    });

    $('#MarketSize').val(commaSeparateNumber($('#MarketSize').val()));
});

/* http://stackoverflow.com/questions/2632359/can-jquery-add-commas-while-user-typing-numbers */
$('input.number').keyup(function(event) {

  // skip for arrow keys
  if(event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    return value
    .replace(/\D/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    ;
  });
});                

/* http://stackoverflow.com/questions/3883342/add-commas-to-a-number-in-jquery */            
function commaSeparateNumber(val)
{
    while (/(\d+)(\d{3})/.test(val.toString()))
    {
        val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
    }
    return val;
}            

</script>    
</body>
</html>

score 0 · Accepted Answer · edited May 23 '17 at 10:33

The problem is not about how large the numbers are. The problem is related to whether or not the 'onchange' event is triggered.

If you go through https://dev.w3.org/html5/spec-preview/common-input-element-apis.html#event-input-change, you find that if you programmatically change the value, you have to manually trigger the change event.

A related query has been discussed at Google Chrome change event in input is not fired if char added on keyup

The following small addition to your javascript makes it work:

$(document).ready(function() {
    $("#Customers2,#MonetarySpend").on("change", function() {
        /* https://stackoverflow.com/questions/12559208/how-to-remove-comma-from-number-which-comes-dynamically-in-tpl-file */
        var c2 = $("#Customers2").val();
        c2 = c2.replace(/\,/g,'');
        c2 = parseInt(c2,10);

        var ms = $("#MonetarySpend").val();
        ms = ms.replace(/\,/g,'');
        ms = parseInt(ms,10);                        

        var MarketSize = c2 * ms;
        $("#MarketSize").val(MarketSize);
        $('#MarketSize').val(commaSeparateNumber(MarketSize));
    });

    $("#Customers2,#MonetarySpend").on("blur", function() {
     $(this).change();
    });
    
    $('#MarketSize').val(commaSeparateNumber($('#MarketSize').val()));
});

/* https://stackoverflow.com/questions/2632359/can-jquery-add-commas-while-user-typing-numbers */
$('input.number').keyup(function(event) {

  // skip for arrow keys
  if(event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    return value
    .replace(/\D/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    ;
  });
});                

/* https://stackoverflow.com/questions/3883342/add-commas-to-a-number-in-jquery */            
function commaSeparateNumber(val) {
    while (/(\d+)(\d{3})/.test(val.toString())) {
        val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
    }
    return val;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="Customers2" id="Customers2" maxlength="11" class="number" value="" placeholder="Please enter a number"/>
    <input type="text" name="MonetarySpend" id="MonetarySpend" maxlength="11" class="number" value="" placeholder="Please enter a dollar amount"/>
    <input type="text" disabled="disabled" name="MarketSize" id="MarketSize" maxlength="11" value=""/>

Multiplying 2 formatted large numbers shows no result in Chrome

1 Answers1