Javascript - insert commas dynamically

[imchaz]

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

[Raffles]

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.

[imchaz]

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.

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.

[imchaz]

I hope you can assist.
Thanks.

[Raffles]

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:

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.