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 — Nino Filiu
– Nino Filiu, Commented Jan 11, 2019 at 12:22
Here's an answer that shows ways of submitting datatables. The ajax example is about getting all the checkboxes. — ourmandave
– ourmandave, Commented Jan 11, 2019 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
– ourmandave, Commented Jan 11, 2019 at 12:53

Eric Aime Tchatchoua · Accepted Answer · 2019-01-11 13:14:20Z

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)
                        );
                    }
                }
            });
        });
      });

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related