CODEWITHSUNDEEP
javascriptjqueryhtml
user1760710
user1760710

Reputation:

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/

Upvotes: 0

Views: 110

Answers (3)

Ankit Agarwal
Ankit Agarwal

Reputation: 1358

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

Upvotes: 0

KAD
KAD

Reputation: 11112

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

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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/

Upvotes: 1

Related Questions