MVC How to display total amount automatically

Question

Im trying to display the total amount in MVC from @Html.TextboxFor()s to @Html.DisplayFor() without total buttons or anything. Just like in winform textChange but I don't have any idea how to do it.

 @Html.TextBoxFor(s => s.num1)
 @Html.TextBoxFor(s => s.num2)

while changing the amount in textboxes, the displayfor will automatically diplays the total

I added this based on Linoy's answer but the .text doesn't seem to display the result.

        $('.getNum1').blur(function () {
            var val1 = $(this).val();
            var val2 = $('.getNum2').val();

            $('.gettotal').text(parseInt(val1) + parseInt(val2));
        });

You need to use javascript to respond to client side events – Sep 26 '18 at 03:56 — , Sep 26 '18 at 03:56

Linoy · Accepted Answer · 2018-09-26T05:50:00.607

0

These are the steps you can make a try

step1: Add class names to two txtboxes and label(we can easily select the textbox with jquery)

Step2: use jquery "onblur" event to identify text box changes(use onblur event in both txtboxes)

Step3: inside the event callback, check all the text boxes are filled. You can fetch textbox values with below query $('.txtboxclassname').val()

Step4: do your logic and update the result to label

$('.labelclassname').text(yourresult)

How to change the text of a label in jQuery?

edited Sep 26 '18 at 05:50

answered Sep 26 '18 at 03:41

Linoy

1,363
1
14
29

thank you .blur is working fine but step4 is not displaying the result – Amits Sep 26 '18 at 05:26
Could you just console the result and check you parsed the values correctly. like console.log(val1+val2) – Linoy Sep 26 '18 at 05:33
i tried console.log and it perfectly displays the answer – Amits Sep 26 '18 at 05:45
Okay, Can you try $('.gettotal').innerHTML =yourresult – Linoy Sep 26 '18 at 05:48
@Amits, Just now I tried $('.labelclassname').text("some text") and it updated correctly. so I strongly believe your selection is wrong. Place $('.gettotal') in browser developer console and see you selected label correctly. – Linoy Sep 26 '18 at 06:00
Could you paste the response of $('.gettotal') from browser developer console. – Linoy Sep 26 '18 at 06:09
[object Object] is displays this – Amits Sep 26 '18 at 06:12
Hmm. Please paste your label html here. I have to take a look – Linoy Sep 26 '18 at 06:14
@Html.TextBoxFor(s => s.proposalsTbl.Saving.January, new{@class="getNum1"}) @Html.TextBoxFor(s => s.proposalsTbl.Saving.February, new{@class="getNum2"}) @Html.DisplayFor(s=>s.Tamount,new { @class="gettotal"}) – Amits Sep 26 '18 at 06:20
DisplayFor returns HTML elements based on the property type. I believe in your html instead of label a textbox is created. so for textbox syntax is different. $('.gettotal').val(yourresult) – Linoy Sep 26 '18 at 06:27
Nice to know @Amits – Linoy Sep 26 '18 at 06:33

Brijesh Yadav · Answer 2 · 2018-09-26T09:35:11.777

Check out this code

 @Html.TextBoxFor(s => s.num1, new { @class = "prop" })
     @Html.TextBoxFor(s => s.num2, new { @class = "prop" })

    <span class="gettotal"></span>

         $(".prop").on("input", function (e) {
                           // debugger;
                            var total = 0;
                            $('input[class*="prop"').each(function () {
                                var rowval = $(this).val();
                                total = total + parseInt(rowval);
                            });
                            $('.gettotal').text(total);
                        });

MVC How to display total amount automatically

2 Answers2