Submit checkboxes value from all pages from jQuery DataTables to the controller

Question

I am trying to pass the value of all select checkbox to the controller. when i run the code I am having the error below and not all checkbox value are passed to the controller

"Uncaught TypeError: Cannot read property 'selected' of undefined"

Please can anyone tell me where I am going wrong

View Code

<table id="tblBulckTicket" class="table table-condensed table-striped table-hover datatable responsive" >
 <thead>
  <tr>
     <th>
     </th>
     <th>
        @Html.Label("id", "Ticket ID")
     </th>
     <th>
        @Html.Label("subject", "Subject")
     <th>
        @Html.Label("StageName", "Status")
     </th>
  </tr>
 </thead>
  <tbody>
  @foreach (var item in Model)
  {
  <tr>
     <td>
        <input type="checkbox" name="TicketId" id="TicketId" value="@item.Id">                                  
     </td>
     <td>
        <a class="pull-left btn btn-primary btn-xs" href="@Url.Action("Ticket", "Home" , new { id=item.Id})">
        <i class="fas fa-hashtag"></i>
        @Html.DisplayFor(modelItem => item.Id) </a>
     </td>
     <td>
        @Html.DisplayFor(modelItem => item.Subject)
     </td>
     <td>
        @Html.DisplayFor(modelItem => item.StageName)
     </td>
  </tr>
  }

Javascript code

    $(document).ready(function () {
        var table =   $('#tblBulckTicket').DataTable({
            "pageLength": 5
        });

        // Handle form submission event 
        $('#formId').on('submit', function (e) {
            var form = this;
            var rows_selected = table.column(0).checkboxes.selected();
            // Iterate over all selected checkboxes
            $.each(rows_selected, function (index, rowId) {
                // Create a hidden element 
                $(form).append(
                    $('<input>')
                        .attr('type', 'hidden')
                        .attr('name', 'TicketId[]')
                        .val(rowId)
                );
            });
              e.preventDefault();
        });  
       });

This doesn't looks like plain html to me. Maybe the tags `asp.net-mvc-3` and `Razor` are needed? I saw similar html syntax [here](https://stackoverflow.com/questions/6365633/what-is-the-html-displayfor-syntax-for) — Nino Filiu, Jan 11 '19 at 12:22
[Here's an answer that shows ways of submitting datatables. The ajax example is about getting all the checkboxes.](https://stackoverflow.com/a/39168426/3585500) — ourmandave, Jan 11 '19 at 12:49
Also your checkboxes all have the same `id=TicketId`. I don't think you need an id since the `value` is unique. — ourmandave, Jan 11 '19 at 12:53

score 2 · Answer 1 · answered Jan 11 '19 at 13:14

With help from Ourmandave Javascript code below

 $(document).ready(function () {
        var table =   $('#tblBulckTicket').DataTable({
            "pageLength": 5
        });
      $('#formId').on('submit', function (e) {
            var form = this;

            // Iterate over all checkboxes in the table
            table.$('input[type="checkbox"]').each(function () {
                // If checkbox doesn't exist in DOM
                if (!$.contains(document, this)) {
                    // If checkbox is checked
                    if (this.checked) {
                        // Create a hidden element 
                        $(form).append(
                            $('<input>')
                                .attr('type', 'hidden')
                                .attr('name', this.name)
                                .val(this.value)
                        );
                    }
                }
            });
        });
      });

Submit checkboxes value from all pages from jQuery DataTables to the controller

1 Answers1