javascript - 2 个字段加在一起不添加我的小数位

Question

我有一个网页，并且在此页面上有 1 个下拉列表和 3 个字段:

1. 付款类型
2. 金额
3. 费用
4. 总金额

我的“金额”字段是可编辑的，“费用”字段从 web.config 文件中读取值，因为根据从下拉列表中选择的选项，有 2 种不同的费用。

但是我的“总计”字段似乎没有添加小数位，而我需要它，并且这两个字段都设置为 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

问题是因为您将提供的值解析为没有 float 的整数。使用 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));