dimanche 10 mai 2015

Show live summation in Html Textbox helper

I'm trying to make a website using asp.net mvc 4 and jQuery 1.9.1 where user can get the summation automatically whenever typing to other textbox. But for some reason whenever I type to other textboxes I don't get any result in my Total textbox. Here are my codes,

<script>
    $(document).ready(function () {
        $('.toSum').each(function () {
            $(this).keyup(function () {
                var total = 0;
                $('.toSum').each(function () {
                    if (this.value.length != 0) {
                        total += parseInt(this.value);
                    }
                });
                $('#txtTotal').html(total);
            });
        });
    });
</script>
<div class="tab-pane" id="AddFl" style="padding-top: 10px; padding-left: 10px;">
            @using (Html.BeginForm("SumManager", "Home"))
            {
                @Html.ValidationSummary(true)
                <div class="editor-label">
                    <strong>Set Basic</strong>
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(a => a.Flats.basic, new { @class="toSum" })
                    @Html.ValidationMessageFor(a => a.Flats.basic)
                </div>
                <div class="editor-label">
                    <strong>Set Bill</strong>
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(a => a.Flats.bill, new { @class="toSum" })
                    @Html.ValidationMessageFor(a => a.Flats.bill)
                </div>
                <div class="editor-label">
                    <strong>Set Miscellaneous</strong>
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(a => a.Flats.misc, new { @class="toSum" })
                    @Html.ValidationMessageFor(a => a.Flats.misc)
                </div>
                <div class="editor-label">
                    <strong>Total</strong>
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(a => a.Flats.total, new { id="txtTotal"})
                    @Html.ValidationMessageFor(a => a.Flats.total)
                </div>                    
                <p><input type="submit" class="btn btn-info" value="Add" /></p>
            }
        </div>

Am I doing something wrong in my code? How can I get the summation result instantly whenever user types on other textboxes? Need this help badly. Tnx.

Aucun commentaire:

Enregistrer un commentaire