anjanesh anjanesh - 3 months ago 8
Javascript Question

Multiplying 2 formatted large numbers shows no result in Chrome

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>

Answer

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() {
        /* 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));
    });

    $("#Customers2,#MonetarySpend").on("blur", function() {
    	$(this).change();
    });
    
    $('#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 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=""/>