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来实现此目的，这里是fiddle

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

减去两个文本字段，并在javascript或jquery中显示第三个结果

2 个答案: