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

Question

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/

Answer 1

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/

Answer 2

You can use keyup to set the new number when the user writes in enter number and call addCommas directly to the entered value :

$('#Enter_Number').keyup(function(){
   $('#new_number').val(addCommas(this.value.replace(',', '')));
});

Working Fiddle

Answer 3

I have updated your fiddle code for solving your problem Use events like change input blur

$('#Enter_Number').on('input change blur',function(){
   $('#new_number').val(addCommas($('#Enter_Number').val().replace(',', '')));
 });

Fiddle Here