Prasanta Baidya

Prasanta Baidya

  • NA
  • 44
  • 4.9k

Calculation in text box

Feb 8 2013 7:07 AM
I want to minus two value live in the page on the basis of the following jquery, I have sum code it is work properly. Please help.

my code is:

<table width="300px" border="1" style="border-collapse: collapse; background-color: #E8DCFF">
        <tr>
            <td width="40px">
                1
            </td>
            <td>
                Number
            </td>
            <td>
                <input class="txt" type="text" name="txt" runat="server" />
            </td>
        </tr>
        <tr>
            <td>
                2
            </td>
            <td>
                Number
            </td>
            <td>
                <input class="txt" type="text" name="txt" runat="server" />
            </td>
        </tr>
        <tr>
            <td>
                3
            </td>
            <td>
                Number
            </td>
            <td>
                <input class="txt" type="text" name="txt" runat="server" />
            </td>
        </tr>
        <tr>
            <td>
                4
            </td>
            <td>
                Number
            </td>
            <td>
                <input class="txt" type="text" name="txt" runat="server" />
            </td>
        </tr>
        <tr>
            <td>
                5
            </td>
            <td>
                Number
            </td>
            <td>
                <input class="txt" type="text" name="txt" runat="server" />
            </td>
        </tr>
        <tr>
            <td>
                6
            </td>
            <td>
                Number
            </td>
            <td>
                <input class="txt" type="text" name="txt" runat="server" />
            </td>
        </tr>
        <tr id="summation">
            <td>&nbsp;
               
            </td>
            <td align="right">
                Sum :
            </td>
            <td align="center">
                <span id="sum">0</span>
            </td>
        </tr>
    </table>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

    <script>
        $(document).ready(function () {
            //iterate through each textboxes and add keyup        
            //handler to trigger sum event        
            $(".txt").each(function () {
                $(this).keyup(function () {
                    calculateSum();
                });
            });
        });
        function calculateSum() {
            var sum = 0;
            //iterate through each textboxes and add the values
            $(".txt").each(function () {
                //add only if the value is number            
                if (!isNaN(this.value) && this.value.length != 0) {
                    sum += parseFloat(this.value);
                    $(this).css("background-color", "#FEFFB0");
                }
                else if (this.value.length != 0) {
                    $(this).css("background-color", "red");
                }
            });
            $("#sum").html(sum.toFixed(2));
        }
    </script>

Answers (1)