locked
Binding Change Event in input element and calculating sum RRS feed

  • Question

  • User-1967952962 posted

    Hi ,

           I have the Editor form with 30 input elements and trying to do the sum of all input values 

        $(document).ready(function()
        {       
            var sum = 0;
    
            $("input[name$='AMT']").each(function (index, element) {
                alert(index + ":" + element); //able to read all amt input elements
    
                var ele = $(this)[index]  //not sure how to read the element ID ????
             
                $(ele).bind("change", function () {
    
                    var value = Number($(this).val());
                    if (!isNaN(value)) sum += value;
    
                    $('#TOTAL').value(sum);
    
                });
    
    
             });     
          
          
        })

    Tuesday, November 1, 2016 11:28 PM

Answers

  • User-1838255255 posted

    Hi Kanmai,

    According to your description , I make a sample for your reference , this sample use jquery get all input value , then use parsefloat method translate it to float type . Then by add method get total value !

    Sample Code:

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.10.2.js"></script>
        <script>
            $(function () {
                var num = 0;
                $(".num").focus(function () {
                    $(this).val("");
                });
                $(".num").bind("blur", function () {
                    var nu = parseFloat($(this).val());
                    num += nu;
                    $("#label1").text(num);
                })
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <input id="Text1" type="text" class="num" value="0" />+
                <input id="Text2" type="text" class="num" value="0" />+
                <input id="Text3" type="text" class="num" value="0" />+
                <input id="Text4" type="text" class="num" value="0" />+
                <input id="Text5" type="text" class="num" value="0" />+
                <input id="Text6" type="text" class="num" value="0" />=
                <label id="label1"></label>
            </div>
        </form>
    </body>

    Result:

    Best Regards,

    Eric Du

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 2, 2016 4:39 AM