How do I Format the "Total" box with a thousand comma seperator?

Question

So I am brand new to JavaScript & HTML. I've created this form and managed to copy & paste JavaScript code to make it work with a lot of trial and error. My only issue is that the total inside of the box doesn't have a comma for the thousand separator, i.e. 26288.00 instead of the desired 26,288.00.

Can someone help me with this? All my searches so far have turned up nothing helpful.

Here is a JSFiddle of the relevent code.

Here is the code since I can't just post the link to jsfiddle:

HTML:

  <fieldset>
    <legend>Engine Options
    </legend><input type="checkbox" checked="checked" required="" name="ezh"><label for="ezh">5.7L V8 HEMI 395 HP 410 lb-ft Torque - Standard
    </label>
  </fieldset>
  <fieldset>
    <legend>Functional Packages</legend>
    <div id="functionalpackages">
      <label><input type="checkbox" name="aed" value="632.00" onclick="updatetotal()">Chrome Appearance Group (Bumpers, Grille, &amp; Aluminum Wheels) - <strong>$632.00</strong></label><br>
      <label><input type="checkbox" name="adb" value="359.00" onclick="updatetotal()">Protection Group (Tow Hooks, Transfer Case &amp; Front Suspension Skid Plates) - <strong>$359.00</strong></label><br>
      <label><input type="checkbox" name="ajb" value="359.00" onclick="updatetotal()">Remote Start &amp; Security Alarm - <strong>$359.00</strong></label></div>
  </fieldset>
  <fieldset>
    <legend>Interior Options</legend>
    <div id="interioroptions">
      <input type="checkbox" id="d7x8" name="d7x8" value="41.00" onclick="updatetotal()"><label for="d7x8">40/20/40 Front Center Bench Seat - <strong>$41.00</strong></label><br>
      <input type="checkbox" id="cke" name="cke" value="100.00" onclick="updatetotal()"><label for="cke">Carpet Floor Covering - <strong>$100.00</strong></label><br>
      <input type="checkbox" id="xap" name="xap" value="114.00" onclick="updatetotal()"><label for="xap">Power Adjustable Pedals - <strong>$114.00</strong></label><br>
      <input type="checkbox" id="xhc" name="xhc" value="268.00" onclick="updatetotal()"><label for="xhc">Trailer Brake Control - <strong>$268.00</strong></label><br>
      <input type="checkbox" id="ra2" name="ra2" value="632.00" onclick="updatetotal()"><label for="ra2">Uconnect 3 with 5" Display &amp; Bluetooth - <strong>$632.00</strong></label></div>
  </fieldset>
  <fieldset>
    <legend>Exterior Options</legend>
    <div id="exterioroptions">
      <input type="checkbox" id="nfx" name="nfx" value="405.00" onclick="updatetotal()"><label for="nfx">32 Gallon Fuel Tank - <strong>$405.00</strong></label><br>
      <input type="checkbox" id="dsa" name="dsa" value="450.00" onclick="updatetotal()"><label for="dsa">Anti-Spin Differential Rear Axle - <strong>$450.00</strong></label><br>
      <input type="checkbox" id="lm1" name="lm1" value="36.00" onclick="updatetotal()"><label for="lm1">Daytime Running Headlamps, Low Beam - <strong>$36.00</strong></label><br>
      <input type="checkbox" id="ttb" name="ttb" value="228.00" onclick="updatetotal()"><label for="ttb">LT265/70R17E BSW All Terrain Tires - <strong>$228.00</strong></label><br>
      <input type="checkbox" id="gpg" name="gpg" value="164.00" onclick="updatetotal()"><label for="gpg"></label>Power Black Trailer Tow Mirrors - <strong>$164.00</strong><br>
      <input type="checkbox" id="gfa" name="gfa" value="177.00" onclick="updatetotal()"><label for="gfa">Rear Window Defroster - <strong>$177.00</strong></label><br>
      <input type="checkbox" id="xb9" name="xb9" value="1178.00" onclick="updatetotal()"><label for="xb9">RamBox Cargo Management System - <strong>$1178.00</strong></label><br>
      <input type="checkbox" id="cs7" name="cs7" value="541.00" onclick="updatetotal()"><label for="cs7">Factory Tri-Fold Tonneau Cover - <strong>$541.00</strong></label><br>
      <input type="checkbox" id="mra" name="mra" value="600.00" onclick="updatetotal()"><label for="mra">Mopar® Stainless Steel Wheel-to-Wheel Side Steps (Dealer Installed) - <strong>$600.00</strong></label><br>
      <input type="checkbox" id="mru" name="mru" value="525.00" onclick="updatetotal()"><label for="mru">Mopar® Black Aluminum Cab Length Side Steps (Dealer Installed) - <strong>$525.00</strong></label></div>
  </fieldset>
  <fieldset>
    <legend>Delete Options</legend>
    <div id="deleteoptions">
      <input type="checkbox" id="xf8" name="xf8" value="-91.00" onclick="updatetotal()"><label for="xf8">Delete Class IV Receiver Tow Hitch - <strong>($-91.00)</strong></label><br>
      <input type="checkbox" id="xm9" name="xm9" value="-182.00" onclick="updatetotal()"><label for="xm9">Delete Factory Spray in Bedliner - <strong>(-$182.00)</strong></label><br>
      <input type="checkbox" id="lnx" name="lnx" value="-321.00" onclick="updatetotal()"><label for="lnx">Delete Left LED Spotlight - <strong>(-$321.00)</strong></label></div>
  </fieldset>
  <fieldset>
    <legend>Exterior Color Options</legend>
    <div id="color">
      <input type="radio" id="psc" name="color" value="0.00"><label for="psc">Billet Silver Metallic Clear Coat - <strong>N/C</strong></label><br>
      <input type="radio" id="pw7" name="color" value="0.00"><label for="pw7">Bright White Clear Coat - <strong>N/C</strong></label><br>
      <input type="radio" id="prv" name="color" value="0.00"><label for="prv">Delmonico Red Pearl Coat (Cherry Red)- <strong>N/C</strong></label><br>
      <input type="radio" id="pxj" name="color" value="0.00"><label for="pxj">Diamond Black Crystal Pearl Coat - <strong>N/C</strong></label><br>
      <input style="margin-left:2.5%" type="radio" id="bwv" name="color" value="700.00"><label for="bwv">Black &amp; White Vinyl Wrapped Doors - <strong>$700.00</strong></label><br>
      <input style="margin-left:2.5%" type="radio" id="bwp" name="color" value="995.00"><label for="bwp">Black &amp; White Painted Doors - <strong>$995.00</strong></label><br>
      <input type="radio" id="pr4" name="color" value="0.00"><label for="pr4">Flame Red Clear Coat (Fire Engine Red) - <strong>N/C</strong></label><br>
      <input type="radio" id="pau" name="color" value="0.00"><label for="pau">Granite Crystal Metallic Clear Coat (Gunmetal) - <strong>N/C</strong></label><br>
      <input type="radio" id="pbj" name="color" value="0.00"><label for="pbj">Hydro Blue Pearl Coat (Brighter Blue) - <srong>N/C</srong></label><br>
      <input type="radio" id="par" name="color" value="182.00"><label for="par">Maximum Steel Metallic Clear Coat - <strong>$182.00</strong></label><br>
      <input type="radio" id="ppx" name="color" value="91.00"><label for="ppx">Patriot Blue Pearl Coat (Dark Blue) - <strong>$91.00</strong></label></div>
  </fieldset>
  <fieldset>
    <legend>Service Contracts (Extended Warranties)</legend>
    <div id="servicecontracts">
      <label for="pmx375"><u>3 Years/75,000 Mile Maximum Care Service Contract</u></label><br>
      <input style="margin-left:2.5%" type="checkbox" id="pmx375" name="warranty" value="2865.00" onclick="updatetotal()"><strong>$0.00 Deductible - $2,865.00</strong><br>
      <label for="pmx575"><u>5 Years/75,000 Mile Maximum Care Service Contract</u></label><br>
      <input style="margin-left:2.5%" type="checkbox" id="pmx575" name="warranty" value="2585.00" onclick="updatetotal()"><strong>$0.00 Deductible - $2,585.00</strong>
      <input style="margin-left:2.5%" type="checkbox" id="pm575" name="warranty" value="3410.00" onclick="updatetotal()"><strong>$100.00 Deductible - $3,410.00</strong>
      <label for="pmx5100"><u>5 Years/100,000 Mile Maximum Care Service Contract</u></label><br>
      <input style="margin-left:2.5%" type="checkbox" id="pmx5100" name="warranty" value="4440.00" onclick="updatetotal()"><strong>$0.00 Deductible - $4,440.00</strong></div>
  </fieldset>
  <fieldset>
    <legend>Upfit Options</legend>
    <div id="upfitoptions">
      <input type="checkbox" id="pdsm" name="upfit" value="4695.00" onclick="updatetotal()"><label for="pdsm">Basic Patrol Package - <strong>$4,695.00</strong></label>
      <ul>
        <li style="margin-left:2.5%">Wiring Harness</li>
        <li style="margin-left:2.5%">Light &amp; Siren Control</li>
        <li style="margin-left:2.5%">Rear Deck Light with Arrow Stick</li>
        <li style="margin-left:2.5%">Floor console with arm rest and cup holders</li>
        <li style="margin-left:2.5%">Speaker &amp; Bracket</li>
        <li style="margin-left:2.5%">Full feature light bar, LED</li>
        <li style="margin-left:2.5%">Activate Headlight &amp; Taillight Flasher</li>
        <li style="margin-left:2.5%">Outside Mirror LED’s</li>
        <li style="margin-left:2.5%">Master-Tech Installation</li>
      </ul>
      <input type="checkbox" id="pdsu" name="upfit" value="4495.00" onclick="updatetotal()"><label for="pdsu">Basic Slick Top Package - <strong>$4,495.00</strong></label>
      <ul>
        <li style="margin-left:2.5%">Wiring Harness</li>
        <li style="margin-left:2.5%">Light &amp; Siren Control</li>
        <li style="margin-left:2.5%">Rear Deck Light with Arrow Stick</li>
        <li style="margin-left:2.5%">Floor console with arm rest and cup holders</li>
        <li style="margin-left:2.5%">Speaker &amp; Bracket</li>
        <li style="margin-left:2.5%">Activate Headlight &amp; Taillight Flasher</li>
        <li style="margin-left:2.5%">Full Length Windshield Light</li>
        <li style="margin-left:2.5%">Outside Mirror LED’s</li>
        <li style="margin-left:2.5%">Master-Tech Installation</li>
      </ul>
      <input type="checkbox" id="pdsc" name="upfit" value="0.00" onclick="updatetotal()"><label for="pdsc">I'd like a full custom upfit quote.</label>

    </div>
  </fieldset>
  <fieldset>
    <legend>Graphics Packages</legend>
    <div id="graphics">
      <input type="checkbox" id="bnrk" name="graphics" value="800.00" onclick="return ValidateGraphics();"><label for="bnrk">Basic Non-Reflective Police Kit - <strong>$800.00</strong></label><br>
      <input type="checkbox" id="brk" name="graphics" value="900.00" onclick="return ValidateGraphics();"><label for="brk">Basic Reflective Police Kit - <strong>$900.00</strong></label><br>
      <input type="checkbox" id="cgq" name="graphics" value="0.00" onclick="return ValidateGraphics();"><label for="cgq">I'd like a custom graphics quote.</label></div>
  </fieldset>
  <fieldset>
    <legend>Total Price</legend><label>Total: $<input type="text" id="total" value="26288" size="6" readonly=""></label>
  </fieldset>
</form>

JavaScript:

  var fp = document.getElementById('functionalpackages');
  var fps = fp.getElementsByTagName('input');
  var io = document.getElementById('interioroptions');
  var ios = io.getElementsByTagName('input');
  var eo = document.getElementById('exterioroptions');
  var eos = eo.getElementsByTagName('input');
  var dos = document.getElementById('deleteoptions');
  var doss = dos.getElementsByTagName('input');
  var sc = document.getElementById('servicecontracts');
  var scs = sc.getElementsByTagName('input');
  var uo = document.getElementById('upfitoptions');
  var uos = uo.getElementsByTagName('input');
  var gp = document.getElementById('graphics');
  var gps = gp.getElementsByTagName('input');

  for (var i = 0, len = fps.length; i < len; i++) {
    if (fps[i].type === 'checkbox') {
      fps[i].onclick = updateTotal;
    }
  }

  for (var i = 0, len = ios.length; i < len; i++) {
    if (ios[i].type === 'checkbox') {
      ios[i].onclick = updateTotal;
    }
  }

  for (var i = 0, len = eos.length; i < len; i++) {
    if (eos[i].type === 'checkbox') {
      eos[i].onclick = updateTotal;
    }
  }

  for (var i = 0, len = doss.length; i < len; i++) {
    if (doss[i].type === 'checkbox') {
      doss[i].onclick = updateTotal;
    }
  }

  for (var i = 0, len = scs.length; i < len; i++) {
    if (scs[i].type === 'checkbox') {
      scs[i].onclick = updateTotal;
    }
  }

  for (var i = 0, len = uos.length; i < len; i++) {
    if (uos[i].type === 'checkbox') {
      uos[i].onclick = updateTotal;
    }
  }

  for (var i = 0, len = gps.length; i < len; i++) {
    if (gps[i].type === 'checkbox') {
      gps[i].onclick = updateTotal;
    }
  }
}

function updateTotal(e) {

  var form = this.form;

  var val = parseFloat(form.elements['total'].value);

  if (this.checked) {
    val += parseFloat(this.value);
  } else {
    val -= parseFloat(this.value);
  }

  form.elements['total'].value = formatDecimal(val);
}

function formatDecimal(val, n) {
  n = n || 2;
  var str = "" + Math.round(parseFloat(val) * Math.pow(10, n));
  while (str.length <= n) {
    str = "0" + str;
  }
  var pt = str.length - n;
  return str.slice(0, pt) + "." + str.slice(pt);
}

gettotalprice();

score 0 · Answer 1 · answered Jun 18 '20 at 04:59

Quick function to format number

function formatDecimal(num) {
  let split = num.toString().split('.');
  let numeric = split[0];
  let decimal = split.length > 1 ? '.' + split[1] : '';
  numeric = numeric.replace(/\,/g, '');
  let reg = /(\d+)(\d{3})/;
  while (reg.test(numeric)) {
    numeric = numeric.replace(reg, '$1' + ',' + '$2');
  }
  return numeric + decimal;
}

console.log(formatDecimal(1000000.34))

Can be optimised even further.

Algef Almocera · Answer 2 · 2020-06-18T05:07:44.923

Here's a working solution that fixes your problem:

https://jsfiddle.net/ecnuhz7t/3/

The solution came from a somewhat related article here: Calculation for comma number gives NaN value

The change was done in the formatDecimal function you have:

function formatDecimal(val) {
  const [ value, decimal ] = val.toString().split('.');
  const withComma = value
    .replace(/\D/g, "")
    .replace(/(\d)(?=(\d{3})+$)/g, '$1,');
  const suffix = decimal ? `.${decimal}` : '';
  return withComma + suffix;
}

How do I Format the "Total" box with a thousand comma seperator?

2 Answers2