減去兩個文本字段並在 javascript 或 jquery 中的第三個字段上顯示結果

Question

如何從 second_reading 中減去 first_reading 並在 total_reading 中顯示總數而不直接在表單字段上添加任何 onclick、onkeyup、onblur 等，但在腳本上（我不會觸摸表單，因為它是一個短代碼）。 如果在 jQuery 中，我將需要非沖突代碼，因為我將在 Wordpress 中使用它。 先感謝您！

<form name="log" id="log">

<input type="text" name="first_reading" id="first_reading">
<input type="text" name="second_reading" id="second_reading">

<input type="text" name="total_reading" id="total_reading">

</form>

Answer 1

您可以在 footer.php 文件中使用 jquery 來存檔，這是小提琴

$(document).ready(function() {
    if($("#log").length){
        $( "#first_reading" ).keyup(function() {
            $.sum();          
        }); 
        $( "#second_reading" ).keyup(function() {
            $.sum();          
        }); 
     }   
        $.sum = function(){
            $("#total_reading").val(parseInt($("#first_reading").val()) + parseInt($("#second_reading").val()));
        } 
});

Answer 2

嗨，下面是我的代碼，我試圖使用這個解決方案，幾乎沒有修改，您的幫助將不勝感激。 我的代碼不顯示輸出但沒有錯誤。

@if (ViewBag.Admin == true) {

    <div class="form-group">
        @Html.LabelFor(model => model.Workplan.FundingGrant, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.FundingGrant, new { htmlAttributes = new { @class = "txt form-control", @name = "txt", @readOnly = "true", @id = "a" } })
            @Html.ValidationMessageFor(model => model.FundingGrant, "", new { @class = "text-danger" })
        </div>
    </div>
}
else
{

    <div class="form-group">
        @Html.LabelFor(model => model.Workplan.FundingGrant, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.FundingGrant, new { @class = "txt form-control", @name = "txt", @id = "a" })
            @Html.ValidationMessageFor(model => model.FundingGrant, "", new { @class = "text-danger" })
        </div>
    </div>

}


<div class="form-group">
    @Html.Label("Funding Carried Over from Previous Year", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.FundingCarriedOver, new { htmlAttributes = new { @class = "txt form-control", @name = "txt", @id = "b" } })
        @Html.ValidationMessageFor(model => model.AdminFee, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.Label("Admin Fee (Max of 5% of Funding Grant)", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.AdminFee, new { htmlAttributes = new { @class = "txt form-control", @name = "txt", @id = "c" } })
        @Html.ValidationMessageFor(model => model.AdminFee, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.Label("Total Funding To Be Spent In Section C", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.TextBox("TotalFundingToBeSpentInSectionC", "", "{0:c}", new { @class = "form-control", @readOnly = "true", @value = "0.00" })
    </div>
    <script>
        $(document).ready(function () {
            if ($(".txt").length) {
                $("#a").keyup(function () {
                    $.sum();
                });

                $("#a").mousemove(function () {
                    $.sum();
                });

                $("#a").after(function () {
                    $.sum();
                });

                //take the input from b
                $("#b").keyup(function () {
                    $.sum();
                });

                $("#b").mousemove(function () {
                    $.sum();
                });

                $("#b").after(function () {
                    $.sum();
                });

                //take the input from c
                $("#c").keyup(function () {
                    $.sum();

                    $("#c").mousemove(function () {
                        $.sum();

                        $("#c").after(function () {
                            $.sum();
                        });
                    });
                });

                // $.sum = function () {
                function sum() {
                    var sum = 0;
                    //iterate through each textboxes and add the values
                    $(".txt").each(function () {

                        if (!isNaN(this.value) && this.value.trim().length != 0) {
                            sum = parseFloat($("#a").val()) + parseFloat($("#b").val()) - parseFloat($("#c").val());
                        }

                    });
                    if (!isNaN(sum)) {
                        document.getElementById("TotalFundingToBeSpentInSectionC").value =
                            '$' + sum.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

                    }

                    // sum = $("#tot").val(parseFloat($("#a").val()) + parseFloat($("#b").val()) - parseFloat($("#c").val()));
                    // sum = parseFloat($("#a").val()) + parseFloat($("#b").val()) - parseFloat($("#c").val());
                    // });
                }
    </script>