Dynamic sum of textbox values asp.net

Question

In my application I have five textboxes. The task which I want to do is that to add(sum) the values entered in the five texboxes and display it in the 6th textbox. I have tried the following code but it is not showing the addition. Can you tell me what I am doing wrong here?

ASPX Code

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

you are missing quotes around (<%=Total%>) probably should be ("%=Total%>") like your other getElement* calls — Patrick Evans
– Patrick Evans, Commented Jan 27, 2014 at 4:32
Use '<%=D1.ClientID%>'.. etc inside method validate() as well. Also use '<%=Total.ClientID %>' inside calc() — mshsayem
– mshsayem, Commented Jan 27, 2014 at 4:32
it gives me an error that 0x800a1391 - JavaScript runtime error: 'calc' is undefined — SPandya
– SPandya, Commented Jan 27, 2014 at 4:37

P.Sethuraman · Accepted Answer · 2014-01-27 05:37:33Z

1

DEMO 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);

    });

answered Jan 27, 2014 at 5:37

P.Sethuraman

7153 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

SPandya Over a year ago

fiddle is working fine but not working when I try to execute with visual studio 2012

P.Sethuraman Over a year ago

@SPandya Did you add clientidmode=static for total textbox?what happened on keyup and keydown?

SPandya Over a year ago

yes I did. And now I can also enter the alphabetic values as well. which should not be there

P.Sethuraman Over a year ago

@SPandya I hope you write the jquery code on document.ready function and also check in firebug Is there any jquery issue?

SPandya Over a year ago

opps...i made a silly mistake. Forgot to add the jquery reference. Sorry.

|

Prasad · Accepted Answer · 2014-01-27 05:18:39Z

Plz Check the Modifications:

<script type="text/javascript">

    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;
        }

    }
    function calc() {
        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);

        if ($.isNumeric(total)) {
            $('#Total').val(total);
        }

    }

</script>

Collectives™ on Stack Overflow

Dynamic sum of textbox values asp.net

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related