Q:

Jquery - Number formatting only works when I click in the input box

I have a function that formats a number. I would like to trigger the number entered to be already formatted in the new in textbox("Format result"). Whats happening now is that when I click in the new textbox that is when the format function formats. I would want the user to enter a number in ("Enter Number") textbox and the new textbox("Format result") will have the formatted number.
I have put a fiddle with the script.
HTML
Enter Number: <input type="text" id="Enter_Number" ><br><br>

Format result : <input type="text" id="new_number" >

Jquery
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;
}
    $("#new_number").blur(function(){
        this.value = addCommas(this.value.replace(',', ''));
    });

$('#Enter_Number').change(function(){
   $('#new_number').val($('#Enter_Number').val());
});

https://jsfiddle.net/saiyan10133/1to2gkc7/

A:

You have given in the blur() event:
$("#new_number").change(function(){
    this.value = addCommas(this.value.replace(',', ''));
});

Make it change event and also trigger the change in the parent event.
$('#Enter_Number').change(function(){
    $('#new_number').val($('#Enter_Number').val()).trigger("change");
});

Or better way, add both the functions in a single event:
$('#Enter_Number').change(function(){
    $('#new_number').val(addCommas($('#Enter_Number').val().replace(',', ''));
});

Snippet

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;
}
$("#new_number").change(function(){
    this.value = addCommas(this.value.replace(',', ''));
});

$('#Enter_Number').change(function(){
    $('#new_number').val($('#Enter_Number').val()).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Enter Number: <input type="text" id="Enter_Number" ><br><br>
Format result : <input type="text" id="new_number" >

Fiddle: https://jsfiddle.net/t3znvt52/

