how to fill textbox with data on a click on a checkbox inside a table using jquery from database in mvc

Question

I have a situation like this, inside a table i have multiple checkbox while if its check data will be fetch from database and fill the corresponding textbox... I am able to get the data but couldn't fill the textbox pls help me in this

here what i have done :

in my View :

 <script type="text/javascript">
 $(document).ready(function () {

     $('input:checkbox[name=adicheck]:checked').each(function () {
         var empCode = $('#hdnEmp').val();
         var chckid = $(this).val();
         debugger;
         $.get('/Employee/GetSalary',
         {
             empCode: empCode, ID: chckid
         },
         function (data,status) {
             var $row = $(this).closest("tr");
             $row.find('.textfield2').val(data.Monthly);
             $row.find('.textfield3').val(data.Annualy);
         });

     });
 });

  @using KerelaGold.Models;
  @{
    kerelagoldloanEntities db = new kerelagoldloanEntities();
     var empsalary = Convert.ToString(Session["empsalary"]);
     var emps = db.SetSalaries.Where(e => e.EmployeeId == empsalary).FirstOrDefault();
      List<SetSalaryDetail> emp = new List<SetSalaryDetail>();
   if (emps != null)
   {
     var empsd = db.SetSalaryDetails.Where(e => e.SetSalaryId == emps.SetSalaryId).ToList();

       emp = empsd;
  }  

var empsalaryd = emp.Select(e => e.PayName).ToArray();

var i = 0;

 <div class="table-section">
    <table id="tbl" width="100%" border="0" cellspacing="0" cellpadding="0"  class="table-style">
        <thead>
              <tr>
                <th>
                    <input type="checkbox" id="chkAll" class="SelectAll" /><label>&nbsp;All</label>
                </th>
                 <th>
                    Name
                </th>
                <th>
                    Monthly
                </th>
                <th>
                    Annualy
                </th>
            </tr>
         </thead>
         <tbody>
            @foreach (var item in Model)
            {
                <tr id='@i++'>
                    <td>
                        @if (emp.Count > 0)
                        {

                            if (empsalaryd.Contains(item.Name))
                            {
                            <input type="checkbox" class="checkedItem" checked="checked" name="adicheck" value="@item.SalaryComponentId" />
                            <input type="hidden" id="@String.Concat("B", item.SalaryComponentId)" value="@item.SalaryComponentId" />
                            }
                            else
                            {
                            <input type="checkbox" class="checkedItem" name="adicheck" value="@item.SalaryComponentId" />
                            <input type="hidden" id="@String.Concat("B", item.SalaryComponentId)" value="@item.SalaryComponentId" /> 
                            }

                        }
                        else
                        {
                            <input type="checkbox" class="checkedItem" name="adicheck" value="@item.SalaryComponentId" />
                            <input type="hidden" id="@String.Concat("B", item.SalaryComponentId)" value="@item.SalaryComponentId" />
                        }
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name, new { @class = "textfield" })
                    </td>
                    <td>
                        @Html.TextBoxFor(modelItem => item.Monthly, new { @class = "textfield2", @readonly = "readonly", @onkeypress = "return isDecimalNumber(event);" })
                    </td>
                    <td>
                        @Html.TextBoxFor(modelItem => item.Annualy, new { @class = "textfield3", @readonly = "readonly", @onkeypress = "return isDecimalNumber(event);" })
                    </td>
                </tr>

            }
        </tbody>
    </table>
</div>
}@*

and in my controller :

    public JsonResult GetSalary(string empCode, int ID)
    {
        var salID = db.SetSalaries.Where(s => s.EmployeeId == empCode).Select(s => s.SetSalaryId).FirstOrDefault();
        var salDet = db.SetSalaryDetails.Where(s => s.SetSalaryId == salID && s.SalaryCompID == ID).Select(s => new { s.Monthly,s.Annualy }).FirstOrDefault();
        return Json(salDet, JsonRequestBehavior.AllowGet);
    }

so the situation is like this i am also uploading an image to show the problem

 ![i need different values in monthly and annualy with chechked][1]

please help me on this

Answer 1

$(function () { $(document).ready(function () {

    $('input:checkbox[name=adicheck]:checked').each(function () {
        var empCode = $('#hdnEmp').val();
        var chckid = $(this).val();
            $.ajax({
                url: "/Employee/GetSalary",
                data: "{}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",                    
                success: function (data) {
                    //debugger;
                    response($.map(data.d, function (item) {
                        return {
                            value: item.Monthly
                        }
                    }))
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        });
});
}

Hope this will help.

Answer 2

here what i have done, changed only the jquery part..

$(document).ready(function () {
    $(".checkedItem").each(function () {
        if ($(this).is(":checked")) {
            var empCode = $('#hdnEmp').val();
            var chckid = $(this).val();
            var $row = $(this).closest("tr");

            $.get('/Employee/GetSalary',
                {
                    empCode: empCode, ID: chckid
                },

                function (data, status) {
                    $row.find('.textfield2').val(data.Monthly);
                    $row.find('.textfield3').val(data.Annualy);
                });

        }

    });
});