Ajax post values of dropdownlist and checkbox from jquery datatable to controller

Question

I have a datatable in my view, i need to pass values from datatable to controller on submit button. In the case of textboxes, it is working fine. I've trouble in passing values from dropdownlist as well as checkbox.

My view side code,

<script type="text/javascript" charset="utf-8">
  $(document).ready(function () {
  $.get(
  '/Food/GetAllChild',
  function (data) {
  var htmlstmp = "";
  for (var i = 0; i < data.length; i = i + 1) {
    //Add rows to the datatable as per number of items in database
    htmlstmp += "<tr>"; 
    htmlstmp += " <td>";
    htmlstmp += "<div class='divslno'><div class='tdlabel'>" + data[i].ChildId +"</div> </div>";
    htmlstmp += "</td>"; 
    htmlstmp += "<td><div class='divdeliveryitem'><select class='fordivdeliveryitemselector' id='" + data[i].ChildId + "'>";
    htmlstmp += "<option class='foodlist'>Select</option>";
    htmlstmp += "<option class='foodlist'>Menu 1</option>";
    htmlstmp += "</select></div></td>";
    htmlstmp += "<td>";     
    htmlstmp += "<div class='deliverystatusrow1'> <input type='checkbox' class='deliverystatuschb' value='false' /></div>";
    htmlstmp += "</td>";
    htmlstmp += "</tr>";
  }

  //Append "htmlstmp" to the datatable's tbody. childfoodattendancetbody is id of tbody
$('#childfoodattendancetbody').append(htmlstmp);
     var oTable = $('#example').dataTable({
     "iDisplayLength": 5,
     "bSort": false
  }); 
$("#btnsaveall").click(function () {
   var datatopost = new Object(); 
  $("#example .row_selected").each(function (i, item) {
     var chidltdid = $(item).find("td .tdlabel:eq(0)").html();
     datatopost["[" + i + "].ChildId"] = chidltdid;
     datatopost["[" + i + "].FoodMenuId"] = $(item).find("td .fordivdeliveryitemselector#"+chidltdid+" :eq(1)").html(); 
     datatopost["[" + i + "].FoodDelivery_Status"] = $(item).find("td .deliverystatuschb :eq(2)").attr("value");
   }); 
});
 $.ajax({
    url: '@Url.Action("InsertData")',
    type: 'POST',
    traditional: true,
    data: datatopost,
    dataType: "html",
    success: function (response) {
  }
 });

 });
});

 </script>

Datapost variable is showing following values, when i checked via chrome inspect element

[0].ChildId: "1"
[0].FoodDelivery_Status: undefined
[0].FoodMenuId: undefined
[1].ChildId: "2"
[1].FoodDelivery_Status: undefined
[1].FoodMenuId: undefined

My action looks like,

[HttpPost]
public ActionResult InsertData(List<FoodDelivery> fooddelivery)
{
    int _childid, _menu;
    bool _deliverystatus;           
    for (int i = 0; i < fooddelivery.Count; i++)
    {
        _childid = fooddelivery[i].ChildId;
        _deliverystatus = fooddelivery[i].FoodDelivery_Status;
        _menu = fooddelivery[i].FoodMenuId;
            // Code to insert to database

      }
      return View();
   }

What am i doing wrong here?

Please help,

Thanks

Kishore · Accepted Answer · 2012-11-21 09:24:18Z

3

Change tablebody rendering to razor syndax instead of Jquery and assign each control an ID to be easier to find it's value.

Try this

var selectValMenuItem = $('.fordivdeliveryitemselector#' + chidltdid + ' :selected').val();                                        

var delvstatus = $('input[id=' + chidltdid+']').attr('checked');

answered Nov 21, 2012 at 9:24

Kishore

1,3772 gold badges11 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Ajax post values of dropdownlist and checkbox from jquery datatable to controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related