Using jquery to dynamically add values in text box

Question

I have Razor UI where in I have 3 columns as shown below:

DEnom  amt   totalamt
$1     0     0
$5     4     20
$10    1     10
$50    0     0
$100   2     200

Total  7     230

Here the denomination may vary from time to time.

So populated the UI using for loop as below:

@for (int count = 0; count < Model.Bill.Count(); count++)
{
    <tr>
        <td>
            @Html.LabelFor(m => m.Bill[count].BillDenom)
        </td>
        <td>
            @Html.TextBoxFor(m => m.Bill[count].Count)
        </td>
        <td>
            @Html.TextBoxFor(m => m.Amount)
        </td>
    </tr>
}

now if i enter amount for each denom the correspondong total amd totalamt should be calculated dynamically. How to achieve this using jQuery.

Use $("tr").each() to loop through the rows, and add the amounts and totals to variables. — Barmar
– Barmar, Commented Jan 23, 2014 at 5:35

user3040830 · Accepted Answer · 2014-01-23 05:42:49Z

1

Generate a ID for all the controls dynamically while producing them like Denom_+count, amt_count and totalamt_+count.

Give a class to the Denom textbox and in jquery on event write the keyup functionality

$(document).on('keyup','.SpecifiedClass',function(){
  var id=$(this).attr('id');
  var pointer=id.split('_')[1];
  //Now you have the pointer to that row so you can calculate the other 
  //controls value and use the logic for summation
})

answered Jan 23, 2014 at 5:42

user3040830

Sign up to request clarification or add additional context in comments.

Comments

Tommy · Accepted Answer · 2014-01-23 05:47:45Z

The easiest way would be to add an identifier to each textbox so that you can use jQuery to easily find them and get the current values. I recommend a class because those can be repeated without generating invalid HTML.

@for (int count = 0; count < Model.Bill.Count(); count++)
{
   <tr>
     <td>
        @Html.LabelFor(m => m.Bill[count].BillDenom)
     </td>
     <td>
        @Html.TextBoxFor(m => m.Bill[count].Count, new {@class = "Count"})
     </td>
     <td>
        @Html.TextBoxFor(m => m.Amount, new {@class = "Amount"})
     </td>
  </tr>
}
<!--Create placeholders with IDs for the total amounts-->
<span id="TotalCount"></span>
<span id="TotalAmount"></span>

Now, we need to add handlers to each textbox so that jQuery can know when it needs to calculate an updated amount.

<script type="text/javascript">
    $(function(){
         $(".Amount").on("focusout", function(){
              RecalculateItems();
         });
         $(".Count").on("focusout", function(){
              RecalculateItems();
         });         
    })
</script>

Lastly, we need to implement the RecalculateItems() function which will loop through all the items and sum them up accordingly.

function RecalculateItems(){
    var totalCount = 0;
    var totalAmount = 0;
    $(".Count").each(function(){
        //loop through each item with the class Count, parse as integer and add to running total
        totalCount += parseInt($(this).val());
    });
    $(".Amount").each(function(){
        //same as above, except with items with Amount class
        totalAmount += parseInt($(this).val());
    }); 
    //set inner html of each span identified above with the correct values
    $("#TotalAmount").html(totalAmount);
    $("#TotalCount").html(totalCount);
}

Chirag Vidani · Accepted Answer · 2014-01-23 05:48:03Z

1

Try with below code:

Modified HTML code with classname to <td>

<tr>
    <td class="denom">@Html.LabelFor(m => m.Bill[count].BillDenom)</td>
    <td class="amtcount">@Html.TextBoxFor(m => m.Bill[count].Count)</td>
    <td class="totalamount">@Html.TextBoxFor(m => m.Amount)</td>
</tr>

Suggested jQuery code

function CountFooter()
{
    var amtCount = 0;
    var totalamount = 0;
    $('table tr').each(function(){
        amtCount +=  parseInt($(this).find('td.amtcount').html(),10);

        totalamount +=  parseInt($(this).find('td.totalamount').html(),10);
    });

    //use amtCount and totalamount to print total value in this row
}

answered Jan 23, 2014 at 5:48

Chirag Vidani

2,59519 silver badges27 bronze badges

2 Comments

Chirag Vidani Over a year ago

@Tommy I am iterating a loop on table tr, where tr are multiple in table and getting current tr's td amtcount and totalamount

Tommy Over a year ago

Whoops! missed that, my bad! :)

hemanth · Accepted Answer · 2014-01-23 07:04:14Z

Add identifiers to your input text boxes like suggested in other answers.

Below code will only change the corresponding amount of modified count. Also updates the total sum.

    $("td input.count").change(function(){
        var denom = parseInt($(this).parent().prev().find(".denom").val()); //getting corresponding denomination
        var amount = parseInt($(this).val()) *denom; //multiplying modified count with denomination
        $(this).parent().next().find(".amount").attr("value",amount); populating new amount 
        populateTotalAmt(); //total amount
    })

    function populateTotalAmt(){
        var totalamount=0;
        $(".amount").each(function(){
            totalamount+=parseInt($(this).val());
        });
        alert(totalamount); //you can populate total amount anywhere in the page according to your requirement.
    }

Hope this helps :)

Collectives™ on Stack Overflow

Using jquery to dynamically add values in text box

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related