gyrocode / jquery-datatables-checkboxes

Checkboxes is an extension for the jQuery DataTables library that provides universal solution for working with checkboxes in a table.
https://www.gyrocode.com/projects/jquery-datatables-checkboxes/
MIT License
150 stars 61 forks source link

No form data #132

Closed deeztek closed 2 years ago

deeztek commented 2 years ago

Banging my head for hours on this one. Implemented checkboxes and it all seems to be working except the form submit. Used the example here:

https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

However, when I try to select either multiple or even a single checkbox, no form data is passed. the only thing that gets passed is the sortTable_length=25 form field.

Here's my javascript code:

<script>
$(document).ready(function() {
    $('#sortTable').DataTable( {
      'processing': true,
      "ajax": {
    "url": "./inc/get_int_recipients.cfm",
    "dataSrc": "DATA"
  },

      dom: 'Blfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        lengthMenu: [
      [ 25, 50, 100, -1 ],
      [ '25 rows', '50 rows', '100 rows', 'Show all' ]

    ],
      'columnDefs': [
        {  targets: 1,
         render: function (data, type, row, meta) {
            return '<a href="edit_internal_recipient.cfm?id=' + data + '" class="btn btn-secondary" role="button"><i class="fa fa-edit"></i></a>';
         }
         },
         {
            'targets': 0,
            'checkboxes': {
               'selectRow': true
            }
         }

      ],
      'select': {
         'style': 'multi'
      },
        "order": [[ 2, "asc" ]]
    } );
  });

// Handle form submission event 
   $('#frm-sortTable').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', 'id[]')
                .val(rowId)
         );
      });
    });
  </script>

Here's my HTML code:

<form id="frm-sortTable" action="test.cfm" method="POST">

      <p><button>Submit</button></p>

      <table class="table table-striped"  id="sortTable" style="width:100%">
        <thead>
          <tr>
            <th></th>
            <th>Edit</th>
            <th>Recipient</th>
            <th>Policy</th>
            <th>PDF Encrypt</th>
            <th>S/MIME Encrypt</th>
            <th>PGP Encrypt</th>
            <th>Sign All</th>
            <th>S/MIME Cert(s)</th>
            <th>PGP Keyring(s)</th>

          </tr>
        </thead>
        <tbody>

        <td></td>
        <td></td>

            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>

</tr>

 </tbody>

        <tfoot>
          <tr>
              <th></th>
            <th>Edit</th>
            <th>Recipient</th>
            <th>Policy</th>
            <th>PDF Encrypt</th>
            <th>S/MIME Encrypt</th>
            <th>PGP Encrypt</th>
            <th>Sign All</th>
            <th>S/MIME Cert(s)</th>
            <th>PGP Keyring(s)</th>
          </tr>
        </tfoot>

      </table>

    </form>
mpryvkin commented 2 years ago

Please check your console for errors. The only error I see is that table variable is undefined in your submit handler. Use var table = $('#sortTable').DataTable({ to store DataTables API instance or replace table with $('#sortTable').DataTable().