在OnClick事件後輸入值每輸入三位後加逗號

-1

我有一個表格來計算抵押貸款的每月付款。按下計算按鈕後，JavaScript函數將根據輸入值進行計算，並在Monthly Payment輸入內設置該計算值。我的問題是，當爲該輸入設置值時，該值不顯示逗號。例如，1543而不是1,543。如果有人知道在每月付款輸入中添加逗號會很好。這裏是房貸計算器與Monthly Payment輸入圖片概述：在OnClick事件後輸入值每輸入三位後加逗號

enter image description here

下面是抵押貸款計算器代碼：

<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>

感謝您的任何幫助。所有的幫助非常感謝。

來源

2014-04-14 Kelsey

[jQuery函數以逗號和小數格式化數字]的可能重複（http://stackoverflow.com/questions/14075014/jquery-function-to-to-format-number-with-commas-and-decimal ） – pennstatephil

也可能重複的http://stackoverflow.com/questions/6784894/add-commas-or-spaces-to-group-every-three-digits?rq=1 – mccainz

@pennstatephil - 拼寫錯誤等！ – pnuts

正確的JavaScript代碼在一個onclick事件Monthly Payments輸入值每三位數字後加一個逗號將是：

<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>

注：代碼是有點亂序來講整潔和可能的評論，但JavaScript的語法是正確的。

來源

2014-04-14 16:54:46 Kelsey

在OnClick事件後輸入值每輸入三位後加逗號

回答

相關問題