2場加在一起，不加我的小數位數

Question

我有這個頁面上的網頁，我我有一個1個下拉菜單和3個領域：

1. 付款類型
2. 金額
3. 費
4. 總金額

我的'金額'字段是可編輯的，我的'費'字段從我的web.config文件中讀取一個值，因爲根據選項有兩種不同的費用從下拉列表中選出。

但我的'總計'字段似乎並沒有添加在我的小數位，我需要它，並且這兩個字段都設置爲type="number"。

我所有的代碼如下

的Web.config

<!-- BACS Fee --> 
<add key="BacsFee" value="25.00" /> 
<!-- Chaps Fee --> 
<add key="ChapsFee" value="50.00" /> 

查看

<div class="form-group"> 
    <label class="col-sm-offset-1 col-sm-4 control-label">Payment method</label> 
    <div class="col-sm-4"><%: Html.DropDownList("PaymentMethod_DropDownList", paymentMethods, new { @class = "form-control", @onchange = "showModal(ChapsModal)" })%></div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-offset-1 col-sm-4 control-label">Amount</label> 
    <div class="col-sm-4"><%:Html.PrefixedTextBox("£", "OneOffPayment_Textbox", oneOffDefault, new { })%></div> 
    <div class="col-sm-offset-5 col-sm-7" id="OneOffPaymentValidation"><%:Html.ValidationMessage("OneOffPayment_Textbox")%></div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-offset-1 col-sm-4 control-label">Fee</label>  
    <div class="col-sm-4"> 
      <div class="input-group"> 
       <span class="input-group-addon">£</span> 
       <div id="BacsFee"> 
        <input id="BacsFee_Textbox" type="number" class="form-control" value="<%= BacsFee %>" disabled> 
       </div> 
       <div id="ChapsFee"> 
        <input id="ChapsFee_Textbox" type="number" class="form-control" value="<%= ChapsFee %>" disabled> 
       </div> 
      </div> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-offset-1 col-sm-4 control-label">Total amount</label> 
    <div class="col-sm-4"><%:Html.PrefixedTextBoxWithId("£", "TotalAmount_Textbox", "TotalAmount_Textbox", "", new { }, true)%></div> 
</div> 

JQuery的

function showModal(modal) { 
     var selectedModal = '#' + modal.id; 
     var e = document.getElementById("PaymentMethod_DropDownList"); 
     if (e.options[e.selectedIndex].text == 'CHAPS') 
     {    
      $(selectedModal).modal('show'); 
      $('#ChapsFee').show(); 
      $('#BacsFee').hide(); 
     } 
     else 
     { 
      $('#ChapsFee').hide(); 
      $('#BacsFee').show(); 
     } 
    } 

$(document).ready(function() { 
    $("#OneOffPayment_Textbox").keyup(function() 
    { 
     var val1 = parseInt($("#OneOffPayment_Textbox").val()); 
     var val2 = parseInt($("#BacsFee_Textbox").val()); 
     $("#TotalAmount_Textbox").val(val1 + val2); 
    }); 
}); 

Answer 1

問題是因爲您將提供的值解析爲沒有浮點的整數。使用parseFloat()代替：

$("#OneOffPayment_Textbox").keyup(function() { 
    var val1 = parseFloat($("#OneOffPayment_Textbox").val()); 
    var val2 = parseFloat($("#BacsFee_Textbox").val()); 
    $("#TotalAmount_Textbox").val(val1 + val2); 
}); 

如果您需要將結果四捨五入至小數點後兩位，使用toFixed(2)：

$("#TotalAmount_Textbox").val((val1 + val2).toFixed(2)); 

Answer 2

使用parseFloat小數像parseFloat($("#OneOffPayment_Textbox").val());

的parseFloat（）函數分析一個字符串參數並返回一個浮點數。