javascript - 文本框值的动态总和 asp.net

Question

在我的应用程序中，我有五个文本框。我想要做的任务是添加(求和)在五个文本框中输入的值并将其显示在第六个文本框中。我已经尝试过以下代码，但它没有显示添加。你能告诉我我在这里做错了什么吗？

ASPX 代码

<asp:TextBox ID="D1" runat="server"  Width="50px" onkeypress="return validate(event)" onkeyup="calc()" ></asp:TextBox>
            <asp:TextBox ID="D2" runat="server" Width="50px" onkeypress="return validate(event)" onkeyup="calc()" ></asp:TextBox>
            <asp:TextBox ID="D3" runat="server" Width="50px" onkeypress="return validate(event)" onkeyup="calc()" ></asp:TextBox>
            <asp:TextBox ID="D4" runat="server" Width="50px" onkeypress="return validate(event)" onkeyup="calc()" ></asp:TextBox>
            <asp:TextBox ID="D5" runat="server" Width="50px" onkeypress="return validate(event)" onkeyup="calc()" ></asp:TextBox>


 Total Hours<asp:TextBox ID="Total" runat="server" Width="50px" ReadOnly="True"></asp:TextBox>

JavaScript

 <script type="text/javascript">

        //Function to allow only numbers to textbox

        function validate(key) {
            //getting key code of pressed key
            var keycode = (key.which) ? key.which : key.keyCode;
            var phn = document.getElementById('D1');
            var phn1 = document.getElementById('D2');
            var phn2 = document.getElementById('D3');
            var phn3 = document.getElementById('D4');
            var phn4 = document.getElementById('D5');
            //comparing pressed keycodes
            if (!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57)) {
                return false;
            }

        }

        void function calc(dat) {
            var a1, a2, a3, a4, a5, total, pp;

            a1 = document.getElementById("<%=D1.ClientID%>").value;
            a2 = document.getElementById("<%=D2.ClientID%>").value;
            a3 = document.getElementById("<%=D3.ClientID%>").value;
            a4 = document.getElementById("<%=D4.ClientID%>").value;
            a5 = document.getElementById("<%=D5.ClientID%>").value;


            total = parseInt(a1) + parseInt(a2) + parseInt(a3) + parseInt(a4) + parseInt(a5);

            document.getElementById(<%=Total%>).value = total;

        }

</script>

Answer 1

演示 FIDDLE

** HTML **

            <asp:TextBox ID="D1" runat="server"  Width="50px" CssClass="sum"></asp:TextBox>
            <asp:TextBox ID="D2" runat="server" Width="50px" CssClass="sum"></asp:TextBox>
            <asp:TextBox ID="D3" runat="server" Width="50px" CssClass="sum"></asp:TextBox>
            <asp:TextBox ID="D4" runat="server" Width="50px" CssClass="sum"></asp:TextBox>
            <asp:TextBox ID="D5" runat="server" Width="50px" CssClass="sum"></asp:TextBox>


 Total Hours<asp:TextBox ID="Total" runat="server" Width="50px" ReadOnly="True" ClientIDMode=static"></asp:TextBox>

** Jquery **

    $('.sum').keydown(function(e) {
        //getting key code of pressed key
        var keycode = (e.which) ? e.which : e.keyCode;
        //comparing pressed keycodes
        if (!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57)) {
            e.preventDefault();
        }
    });

    $('.sum').keyup(function(e) {
        var total=0;
        var current;
        $('.sum').each(function(){
            current=parseInt($(this).val());
        if($.isNumeric(current))
        {
           total+=  current;              
        }
        });
        $("#Total").val(total);

    });