title: Numbers Calculation Output with Commas
body: <p>I have a calculation app that I am building, and I have it where the input displays comma's and the calculation can still run despite the commas, but now I cannot get the output to display with <strong>thousand separator</strong> commas. I have tried almost everything I can think of. Can someone show me where I may be off.</p>
  
  <p>Here is my script:</p>
  
  <pre><code>    jQuery( document ).ready( function( $ ) {
              // SHOW OUTPUT DIV ONLY WHEN ALL FIELDS ARE COMPLETED
              $( '#calc-top' ).bind( 'keyup change', function() {
                  var orderAmount = $( '#orderAmt' ).val().replace( '', ',' );
                  if ( orderAmount !== "" &amp;&amp; $( "#duration option:selected" ).val() !== "" &amp;&amp; $( "#debitFreq option:selected" ).val() !== "" ) {
                      $( 'div#calc-bottom' ).css( 'display', 'block' );
                  } else {
                      $( 'div#calc-bottom' ).css( 'display', 'none' );
                  }
              } );
          } );
  
      jQuery(document).ready(function($){
          $("#orderAmt").keyup(function(event) {
              // skip for arrow keys
              if (event.which &gt;= 37 &amp;&amp; event.which &lt;= 40) {
                  event.preventDefault();
              }
              var $this = $(this);
              var num = $this.val().replace(/,/gi, "");
              var num2 = num.split(/(?=(?:[0-9]{3})+$)/).join(",");
              console.log(num2);
              // the following line has been simplified. Revision history contains original.
              $this.val(num2);
          });
          });
        // end jQuery
  
          // CALCULATE USER INPUT AND WRITE OUTPUT TO HTML ELEMENTS
          function calculate() {
              var orderAmt = parseFloat(document.getElementById( "orderAmt" ).value.replace(/,/g, ''));
              var duration = document.getElementById( "duration" ).value || 0;
              var debitFreq = document.getElementById( "debitFreq" ).value || 0;
              var outputAmt = document.getElementById( 'outputAmt' ) || 0;
              var numPayments = document.getElementById( 'numPayments' ) || 0;
  
              // CALCULATE NUMBER OF PAYMENTS
              if ( debitFreq == 7 ) {
                  numPayments = Math.floor( duration / 7 );
              } else if ( debitFreq == 30 ) {
                  numPayments = Math.floor( duration / 30 );
              }
              document.getElementById( 'numPayments' ).innerHTML = numPayments;
  
              // CALCULATE PAYMENT AMOUNT
              var stepA = (orderAmt / numPayments);
              var stepB = Math.floor( (((15 / 1000) * (duration / 360)) * 12) * orderAmt ) || 0;
              var stepC;
              if ( debitFreq == 7 ) {
                  stepC = 0.10;
                  //} else if (debitFreq == 30) {
                  //stepC = 0.05;
              } else {
                  stepC = 0;
              }
              var stepD = 0;
              //if ((duration == 30) &amp;&amp; (debitFreq == 30)) {
              //stepD = 0.05;
              //} else {
              //stepD = 0;
              //}
              var stepE = stepC - stepD;
              var stepF = Math.floor( (((15 / 1000) * (duration / 360)) * 12) * orderAmt ) || 0;
              var stepG = Math.ceil( stepE * stepF );
              var stepH = stepB - stepG;
              var stepI = stepH / numPayments;
              var monthlyPayments = stepI + stepA;
              outputAmt.innerHTML = monthlyPayments.toFixed( 2 ) || 0;
  
              // OUTPUT WILL SHOW CORRECT DEBIT FORMATS BASED ON USER INPUT (i.e. 'week', 'weeks', 'month', 'months')
              var outputDefault1;
              if ( document.getElementById( "debitFreq" ).value == 7 ) {
                  outputDefault1 = "week";
              } else if ( document.getElementById( "debitFreq" ).value == 30 ) {
                  outputDefault1 = "month";
              }
              document.getElementById( "outputTerm1" ).innerHTML = outputDefault1;
  
              var outputDefault2;
              if ( document.getElementById( "debitFreq" ).value == 7 ) {
                  outputDefault2 = "weeks";
              } else if ( document.getElementById( "debitFreq" ).value == 30 ) {
                  outputDefault2 = "months";
              }
              document.getElementById( "outputTerm2" ).innerHTML = outputDefault2;
  
          }
          // end calculate function
  
          // ONLY ALLOW NUMERIC INPUT, NO ALPHA OR SPECIAL CHARACTERS EXCEPT COMMAS
          function isNumberKey( evt ) {
              var theEvent = evt || window.event;
              var key = theEvent.keyCode || theEvent.which;
              key = String.fromCharCode( key );
              var regex = /^[0-9.,]+$/;
              if ( !regex.test( key ) ) {
                  theEvent.returnValue = false;
                  if ( theEvent.preventDefault ) {
                      theEvent.preventDefault();
                  }
              }
          }
  
          // TRIGGER EVENTS WHEN THE USER ENTERS DATA
          var userinputNum = document.getElementById( "orderAmt" );
          userinputNum.oninput = calculate;
          userinputNum.onkeypress = isNumberKey;
  
          var userinputDays = document.getElementById( "duration" );
          userinputDays.onchange = calculate;
  
          var userinputFreq = document.getElementById( "debitFreq" );
          userinputFreq.onchange = calculate;
  </code></pre>
  
  <p>Here is my fiddle:  <a href="http://jsfiddle.net/qo5b7z93/" rel="nofollow">http://jsfiddle.net/qo5b7z93/</a></p>
  
  <p>Any help is greatly appreciated!</p>