Member Avatar for sqlchopper

i have 5 fields that show a numeric amout.
dem2textbox.text
iif2textbox.text
fir2textbox.text
fab2textbox.text
net2textbox.text
vb.net allow me to format the value from example 1000 to 1,000 using this code.
wn = iff2TextBox.Text
iff2TextBox.Text = wn.ToString("N0")
fields names below shortened for example.
my javascript gets run any time iif2, fir2 or fad2 fields get changed.
originally i did not have the field formated with commas and the script ran net2 = parsint(dem2) - parsint(iif2) - parsint(fir2) - parsint(fab2);

but users want it to show commas. then i found out parsint can not handle "," as a field value of 750,123 would now come back with 750 so i now had to used "remove" command to remove commas (is there a better way?).
but i can not seam to find a javescript command to set the value of the field to show commas. am i just blind?
is there a better way of doing this?
i would think javascript could handle something as basic as this.
TIA

  • 2 Contributors
  • 2 Replies
  • 213 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by sqlchopper

Dani AI

Generated

A simple, robust pattern is to keep a raw numeric value for calculations and a separately formatted string for display. That avoids parse problems that ran into and still gives users the comma-separated view they want. 's linked scripts are a good start; below are modern, easy-to-adopt helpers and a recommended UI pattern.

Keep these small helpers (they handle commas, currency symbols and bad input):

function unformat(s) {
  return String(s).replace(/[^\d.-]/g, ''); // remove commas, currency, spaces
}

function parseNumber(s) {
  const n = Number(unformat(s));
  return isNaN(n) ? 0 : n;
}

function formatNumber(n, opts) {
  // opts optional: {locale: 'en-US', maximumFractionDigits: 0}
  return (opts && opts.locale)
    ? n.toLocaleString(opts.locale, opts)
    : n.toLocaleString();
}

UI pattern to avoid caret jumps and parsing errors while typing:

  • On focus: show the raw number (unformatted) so editing is natural.
  • On blur: parse and reformat for display.
  • Keep the raw numeric value in a hidden input or data attribute for calculations.

Example wiring (conceptual):

input.addEventListener('focus', e => { e.target.value = unformat(e.target.value); });
input.addEventListener('blur',  e => { e.target.value = formatNumber(parseNumber(e.target.value), {locale:'en-US'}); });

function recompute() {
  const total = parseNumber(dem2.value) - parseNumber(iif2.value) - parseNumber(fir2.value) - parseNumber(fab2.value);
  net2.value = formatNumber(total, {locale:'en-US'});
}

Troubleshooting tips: format on blur rather than every keystroke to preserve caret position; use Intl.NumberFormat or toLocaleString for proper locale spacing; store and post raw numbers (not formatted strings) to the server. For advanced input behavior (live formatting with caret preservation), consider a focused input library.

Recommended Answers

All 2 Replies

Member Avatar for Lafinboy

There are a couple of scripts here that may help you out.

Member Avatar for sqlchopper

thanks, that will do the trick..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.