Issue in calculation of values in all text fields

Question

I am implementing MVC application in which I am trying to dynamically calculate and display the calculation of all tr element whenever a user enters the value of Count field. I have static values coming from-

public class Adjustment
{
    public int Id { get; set; }
    public int Size { get; set; }
    public int Pieces { get; set; }
    public int Count{ get; set; }
}

public ActionResult Create()
{
    var adjustments = from adjustment in AddAdjustment() select adjustment;
    ViewBag.AdjustmentList = adjustments;
    return View();
}

private List<Adjustment> AddAdjustment()
{
    List<Adjustment> AdjustmentList = new List<Adjustment>();
    Adjustment oAdjustment = new Adjustment();
    oAdjustment.Id = 1;
    oAdjustment.Size = 10;
    oAdjustment.Pieces = 12;
    oAdjustment.Count = 2;
    AdjustmentList.Add(oAdjustment);
    oAdjustment = new Adjustment();
    oAdjustment.Id = 2;            
    oAdjustment.Size = 20;           
    oAdjustment.Pieces = 11;
    oAdjustment.Count = 1;
    AdjustmentList.Add(oAdjustment);
    return AdjustmentList;
}

My jQuery code is-

<script type="text/javascript">
    $(document).ready(function () {
        $('#Count').blur(function()
        {
            var count = $('#Count').val();
            var bundalSize = $('#BundalSize').text();
            var totalPieces = count*bundalSize;
            $('#Pieces').val(totalPieces);
        });
    });
</script>

and here is my table-

<table class="table table-striped table-hover">
    <thead>
    <tr>
        <th>
            Bundal Size
        </th>
         <th>
            Count
        </th>
         <th style="border-right:solid #e8eef4 thick;">
            Pieces
        </th>           
        <th>
            Count
        </th>
        <th>
            Pieces
        </th>         
    </tr>
</thead>
<tbody>
    @foreach (var item in ViewBag.AdjustmentList)
    {
        <tr>
            <td style="width:100px;" id="BundalSize">
               @item.Size
            </td>        
            <td style="width:90px;">
               @item.Count
            </td>
            <td style="width:180px; border-right:solid #e8eef4 thick;">
              @item.Pieces
            </td>
            <td>    
                  <input id="Count" type="text" style="width:100px ;height:15px ;margin:1px" />
            </td>
            <td>    
                  <input id="Pieces" type="text" style="width:100px ;height:15px ;margin:1px" disabled />
            </td>             
        </tr>
    }
</tbody>
</table>

When I am trying to calculate multiplication on blur event ,it results only for first record in table. I want to calculate it on each id="Count" for each record. Is there any solution for it?

Answer 1

Use class instead of id like,

<td style="width:100px;" class="BundalSize">
     @item.Size
</td> 
<td>    
    <input class="Count" type="text" style="width:100px ;height:15px ;margin:1px" />
</td>
<td>    
    <input class="Pieces" type="text" style="width:100px ;height:15px ;margin:1px" disabled />
</td> 

Change your jquery code like,

$(document).ready(function () {
    $('.Count').blur(function() {
        var $parent = $(this).closest('tr');// for current row
        var count = parseFloat($(this).val()); // use parseInt if integer
        var bundalSize = parseFloat($parent.find('.BundalSize').text());
        var totalPieces = count*bundalSize;
        $parent.find('.Pieces').val(totalPieces);
    });
});

Answer 2

Use for instead of foreach and append the value of the counter i to the ids

<td style="width:100px;" id="BundalSize@i">
....
<input id="Count@i" type="text" style="width:100px ;height:15px ;margin:1px" onblur="Calc('@i');" />
....
<input id="Pieces@i" type="text" style="width:100px ;height:15px ;margin:1px" disabled />

....

<script type="text/javascript">
function Calc(IndexVal) {
    var count = $('#Count' + IndexVal).val();
    var bundalSize = $('#BundalSize' + IndexVal).text();
    var totalPieces = count * bundalSize;
    $('#Pieces' + IndexVal).val(totalPieces);
}
</script>

Answer 3

Try using parseFloat:

var bundalSize = parseFloat($('#BundalSize').text());