CODEWITHSUNDEEP
jqueryasp.netasp.net-mvc
Shihan Khan
Shihan Khan

Reputation: 2188

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,

$(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);
        });
    });
});

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

Upvotes: 0

Views: 77

Answers (2)

Tushar
Tushar

Reputation: 87203

Try this:

$(document).ready(function () {
    $('.toSum').on('keyup', function () {
        var total = 0;

        $('.toSum').each(function () {
            if ($(this).val() && isFinite(parseInt($(this).val(), 10))) total += parseInt($(this).val(), 10);
        });

        $('#txtTotal').val(total);
    });
});

Demo: https://jsfiddle.net/ddbkh58f/1/

Make the total textbox readonly, so that user cannot change its value

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337637

Note that you do not need the initial each() call - the event will be applied to all elements within the matched set automatically. Also, you need to use val() to se the value of an input, not html(). Finally, you can improve the logic of checking for a value, by providing a default value using ||. Try this:

$('.toSum').keyup(function () {
    var total = 0;
    $('.toSum').each(function () {
        total += parseInt(this.value, 10) || 0;
    });
    $('#txtTotal').val(total);
});

Example fiddle

Upvotes: 1

Related Questions