Add Comma After Every Three Digits in Input Value After OnClick Event

Question

I have a table/form that calculates monthly payments for a mortgage. When the calculate button is pressed, a JavaScript function will make a calculation based on the values of the inputs and set the value of that calculation inside of the Monthly Payment input. My problem is when the value is set for that input, the value gets displayed without commas. For instance, 1543 instead of 1,543. If anyone knows anyway to add commas into the Monthly Payment input that would be great. Here is a picture of the Mortgage Calculator with the Monthly Payment input outlined:

enter image description here

Here is the code for the mortgage calculator:

<form action="POST" name="myform">
        <table border="1" bgcolor="#006666">
          <tr> 
            <td align="center" colspan="2"> 
              <script
           language="JavaScript"><!--
function CarLoanCalculator()
{
    form = document.myform
    LoanAmount= form.LoanAmount.value
    LoanAmount = LoanAmount.replace(/,/g, "");
    parseInt(LoanAmount);   
    DownPayment= "0"
    AnnualInterestRate = form.InterestRate.value/100
    Years= form.NumberOfYears.value
        MonthRate=AnnualInterestRate/12
    NumPayments=Years*12
    Prin=LoanAmount-DownPayment

    MonthPayment=Math.floor((Prin*MonthRate)/(1-Math.pow((1+MonthRate),(-1*NumPayments)))*100)/100
    commafy ("MonthPayment")
        form.NumberOfPayments.value=NumPayments
    form.MonthlyPayment.value=MonthPayment

}
        // --></script>

        <script type="text/javascript">
            function format(input)
            {
                var nStr = input.value + '';
                nStr = nStr.replace( /\,/g, "");
                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' );
                }
                input.value = x1 + x2;
            }
        </script>

            <font color="#FFFFFF"
            size="2" face="arial narrow"><b>Mortgage Calculator</b> <br>
              Enter Your Details &amp; Click the Calculate Button</font></td>
          </tr>
          <tr> 
            <td> 
              <table border="0" cellpadding="2">
                <tr> 
                  <td align="right"><font color="#FFFFFF"
                    size="2" face="arial narrow">Finance Amount $ </font></td>
                  <td><font color="#FFFFFF" size="2"
                   face="arial narrow"> 
                    <input type="text"
                    size="10" name="LoanAmount" value="30,000"
                    onBlur="CarLoanCalculator()" onkeyup="format(this)" onChange="CarLoanCalculator()">
                    <br>
                    </font></td>
                </tr>
                <tr> 
                  <td align="right"><font color="#FFFFFF"
                    size="2" face="arial narrow">Annual Interest Rate </font></td>
                  <td><font color="#FFFFFF" size="2"
                   face="arial narrow"> 
                    <input type="text"
                    size="3" name="InterestRate" value="7.0"
                   onBlur="CarLoanCalculator()" onChange="CarLoanCalculator()">
                    % <br>
                    </font></td>
                </tr>
                <tr> 
                  <td align="right"><font color="#FFFFFF"
                   size="2" face="arial narrow">Term of Mortgage</font></td>
                  <td><font color="#FFFFFF" size="2"
                   face="arial narrow"> 
                    <input type="text"
                    size="3" name="NumberOfYears" value="4"
                    onBlur="CarLoanCalculator()" onChange="CarLoanCalculator()">
                    Years<br>
                    </font></td>
                  <td><font color="#FFFFFF" size="2"
                    face="arial narrow"> 
                    <input type="button"
                    name="morgcal" value="Calculate"
                   language="JavaScript" onClick="CarLoanCalculator()">
                    </font></td>
                </tr>
                <tr> 
                  <td colspan="3"><font color="#FFFFFF"></font></td>
                </tr>
              </table>
            </td>
          </tr>
          <tr> 
            <td> 
              <table border="0" cellpadding="2">
                <tr> 
                  <td align="right"><font color="#FFFFFF"
                    size="2" face="arial narrow"> Number of Payments </font></td>
                  <td><font color="#FFFFFF" size="2"
                    face="arial narrow"> 
                    <input type="text"
                    size="7" name="NumberOfPayments">
                    <br>
                    </font></td>
                </tr>
                <tr> 
                  <td align="right"><font color="#FFFFFF"
                    size="2" face="arial narrow">Monthly Payment $ </font></td>
                  <td><font color="#FFFFFF" size="2"
                    face="arial narrow"> 
                    <input type="text"
                   size="7" name="MonthlyPayment" id="test">
                    <br>
                    </font></td>
                </tr>
                <tr> 
                  <td align="center" colspan="2">&nbsp;</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <div align="center"></div>
      </form>

Thank you for any help. All help is greatly appreciated.

possible duplicate of [jQuery function to to format number with commas and decimal](http://stackoverflow.com/questions/14075014/jquery-function-to-to-format-number-with-commas-and-decimal) — pennstatephil, Apr 14 '14 at 15:59
Also possible duplicate of http://stackoverflow.com/questions/6784894/add-commas-or-spaces-to-group-every-three-digits?rq=1 — mccainz, Apr 14 '14 at 16:43

score 1 · Accepted Answer · answered Apr 14 '14 at 16:54

The correct JavaScript code to add a comma after every three digits in the Monthly Payments input value for an onclick event would be:

<script
           language="JavaScript"><!--
function CarLoanCalculator()
{
    form = document.myform
    LoanAmount= form.LoanAmount.value
    LoanAmount = LoanAmount.replace(/,/g, "");
    parseInt(LoanAmount);   
    DownPayment= "0"
    AnnualInterestRate = form.InterestRate.value/100
    Years= form.NumberOfYears.value
        MonthRate=AnnualInterestRate/12
    NumPayments=Years*12
    Prin=LoanAmount-DownPayment

    function ReplaceNumberWithCommas(yourNumber) {
    MonthPayment=Math.floor((Prin*MonthRate)/(1-Math.pow((1+MonthRate),(-1*NumPayments)))*100)/100
    yourNumber = MonthPayment
    //Seperates the components of the number
    var components = yourNumber.toString().split(".");
    //Comma-fies the first part
    components [0] = components [0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    //Combines the two sections
    return components.join(".");
    }
      //Seperates the components of the number
        form.NumberOfPayments.value=NumPayments
    form.MonthlyPayment.value=ReplaceNumberWithCommas()
    //Seperates the components of the number
}
        // --></script>

Note: the code is a bit out of order in terms of neatness and perhaps the comments, but the JavaScript syntax is correct.

Add Comma After Every Three Digits in Input Value After OnClick Event

1 Answers1