locked
Dynamic created textbox handler for jqery RRS feed

  • Question

  • User1480781148 posted

    Hi Friends,

    I am creating dynamic textbox's in asp.net and want to assign them handler like following codes which is used to dynamic sum of textbox1 and textbox2 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript"> $(function () {
    var textBox1 = $('input:text[id$=TextBox1]').keyup(foo);
    var textBox2 = $('input:text[id$=TextBox2]').keyup(foo);
    function foo() {
    var value1 = textBox1.val(); var value2 = textBox2.val();
    var sum = add(value1, value2); $('input:text[id$=TextBox3]').val(sum);
    } function add() {
    var sum = 0; for (var i = 0, j = arguments.length; i < j; i++)
    { if (IsNumeric(arguments[i])) { sum += parseFloat(arguments[i]); } } return sum;
    } function IsNumeric(input) { return (input - 0) == input && input.length > 0; }
    });

    </script></head><body><form id="form1" runat="server"> <div>
    <table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
    <tr> <td>Butter</td> <td> <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox></td>

    </tr> <tr> <td>Cheese</td> <td> <asp:TextBox runat="server" ID="TextBox2"></asp:TextBox>

    </td> </tr> <tr> <td>Total</td> <td>
    <asp:TextBox runat="server" ID="TextBox3"></asp:TextBox>

    </td> </tr> </table> </div> </form></body></ht

    please help me thank you.

    regards,

    asad

    Monday, March 21, 2016 2:29 PM

Answers

  • User61956409 posted

    Hi Asad,

    actually I want to add  ..n number of textbox's (dynamic control) and want to add handler 

    If you’d like to do calculation dynamically from table column, please refer to the sample I shared in this thread.

    http://forums.asp.net/t/2061928.aspx

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 25, 2016 6:15 AM

All replies

  • User-474980206 posted

    add attributes to identify the textboxes:

       <asp:TextBox runat="server" ID="TextBox1"  data-action="sum">

    ...

       <asp:TextBox runat="server" ID="TextBox3"  data-action="total">

    then its:

    <script type="text/javascript">
    $(function() {
       var $sums = $("input:text[data-action=sum]");
       var $total = $("input:text[data-action=total]");
       $sums.keyup(function() {
          var total = 0;
          $sums.each(function(i,e) {
              var v = parseFloat(e.value);
              total += isNaN(v) ? 0 : v;
          });
          $total.val(total);
       });
    });
    </script>

     

    Monday, March 21, 2016 3:31 PM
  • User61956409 posted

    Hi asad_dba,

    You could modify the code to this.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            $(function () {
                var textBox1 = $('input:text[id$=TextBox1]').keyup(foo);
                var textBox2 = $('input:text[id$=TextBox2]').keyup(foo);
    
                function foo() {
                    var value1 = textBox1.val() == "" ? 0 : textBox1.val();
                    var value2 = textBox2.val() == "" ? 0 : textBox2.val();
    
                    var sum = add(value1, value2);
                    $('input:text[id$=TextBox3]').val(sum);
                }
    
                function add() {
                    var sum = 0;
                    for (var i = 0, j = arguments.length; i < j; i++)
                    { if (IsNumeric(arguments[i])) { sum += parseFloat(arguments[i]); } }
                    return sum;
                }
    
                function IsNumeric(input) { return (input - 0) == input && input.length > 0; }
            })
    
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table width="300px" border="1" style="border-collapse: collapse; background-color: #E8DCFF">
                    <tr>
                        <td>Butter</td>
                        <td>
                            <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox></td>
    
                    </tr>
                    <tr>
                        <td>Cheese</td>
                        <td>
                            <asp:TextBox runat="server" ID="TextBox2"></asp:TextBox>
    
                        </td>
                    </tr>
                    <tr>
                        <td>Total</td>
                        <td>
                            <asp:TextBox runat="server" ID="TextBox3"></asp:TextBox>
    
                        </td>
                    </tr>
                </table>
    
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    Tuesday, March 22, 2016 4:55 AM
  • User1480781148 posted

    thank you for reply, actually I want to add  ..n number of textbox's (dynamic control) and want to add handler 

    Tuesday, March 22, 2016 5:56 AM
  • User61956409 posted

    Hi Asad,

    actually I want to add  ..n number of textbox's (dynamic control) and want to add handler 

    If you’d like to do calculation dynamically from table column, please refer to the sample I shared in this thread.

    http://forums.asp.net/t/2061928.aspx

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 25, 2016 6:15 AM