SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Dec 2003
    Location
    springfield,IL
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript - insert commas dynamically

    I was wondering if anyone out there has a solution using Javascript.

    I have input boxes that when a User inputs a numeric value, it dynamically adds commas. I dont want the User to call the function onexit.

    Its a requirement that is needed. My current script has parameters which restricts the User from adding non numeric values, but allows pass a parameter to allow the User to enter postive/negative values and decimals.

    This is the URL that gave me the code:
    JavaScript validate 'as you type' - mredkj.com

    I am trying to adapt the code to allow commas but no luck. I would appreciate any assistance. I would open to changing my code, if your solution helps.

    Thanks.
    Chuck

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The problem with commas is that you have to accept invalid numbers. For example, let's say I want to type "456,729.03" into the box. At some point, I will have typed "456,7" into the box, but that's an invalid number. So I think you will need a solution where commas are allowed at any position after a number, but then the contents are validated when the user has finished typing.

    If you clarify what exactly you want to happen with the commas, then I can help you further.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2003
    Location
    springfield,IL
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    The problem with commas is that you have to accept invalid numbers. For example, let's say I want to type "456,729.03" into the box. At some point, I will have typed "456,7" into the box, but that's an invalid number. So I think you will need a solution where commas are allowed at any position after a number, but then the contents are validated when the user has finished typing.

    If you clarify what exactly you want to happen with the commas, then I can help you further.
    Hello Raffles, Thank you for your reply. Basically if you typed 456 (I would not want you type a comma then 7. For the comma to be inserted, you would type 4567 and after the enter the 7, it turns into 4,567.

    Another example:
    if I type 1000 after that last 0 keystroke, it turns the value into 1,000. If I add 3 more zeros it turns it into 1,000,000. In the same vain if I subtract a 0 from the 1,000,000 the value is 100,000 instead.

    I know there is a function that is called addCommas out there. But essentially, that works on a onclick event or onblur. I need to do it dynamically while typing, and I need it to work also if the user goes back to change the input value.

    Code:
    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;
    }
    Thanks for your assistance and hope it makes sense. I was trying to use this function in conjunction with the link I provided above in my original post but I am doing something wrong.

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2003
    Location
    springfield,IL
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope you can assist.
    Thanks.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    In that case, you just need to use that function with a different event: onchange. Then the function will run whenever there is any change in the textbox (typing or text is pasted in). You should check that there is actually a string first, otherwise return:

    Code javascript:
    textbox.onchange = addCommas;
     
    function addCommas(nStr) {
    	if (!nStr) return;
    	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');
    	}
    	this.value = x1 + x2;
    }
    Note change to last line - that'll set the new value.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •