Form Checkbox Values not Posting

Form Checkbox Values not Posting

scd1982scd1982 Posts: 6Questions: 0Answers: 0
edited September 2013 in Plug-ins
I have a form that includes a table using the following DataTables JS:
[code]

$(document).ready( function () {
var oTable = $('#schedule').dataTable( {
"sScrollY": "500px",
"sScrollX": "100%",
"sScrollXInner": "150%",
"bFilter": false,
"bSort": false,
"bInfo": false,
"bPaginate": false
} );
new FixedColumns( oTable );
} );
[/code]
There are two form elements outside the DataTables the submit button and a hidden field:
[code]



[/code]
The table itself has many checkboxes (one per ) like this:
[code]

[/code]

When I submit the form, I have a PHP error check to see if any checkbox values were passed - if not, a link to go back to the previous page is displayed:
[code]
$return = $_POST['n']; //$_POST['n'] comes from the hidden input outside the DataTable
if(!isset($_POST['modify_booking'])) { //$_POST['modify_booking'] comes from checkboxes inside DataTable
$change_event = "Please select an appointment to modify. Go back";
} else {
// show info on the checkbox values passed in the form
[/code]

Prior to adding DataTables to this form table, everything submitted correctly. Now when I submit the form, the error check shows a value for $_POST['n'] (from the hidden input), but nothing comes through for $_POST['modify_booking'].

I read the documentation on fnGetHiddenNodes http://datatables.net/plug-ins/api#fnGetHiddenNodes but I am unclear as to if this applies to this situation (or how to use it). It appears as if fnGetHiddenNodes is used to get form data from other pages if the table is 'paginated', which it is not in my case.

What should I be adding to this to get it to submit the form properly??

Replies

  • scd1982scd1982 Posts: 6Questions: 0Answers: 0
    OK, an answer here http://stackoverflow.com/questions/10492791/datatables-fngetnodes-how-to-push-the-results-back-to-the-server/10505835#10505835. I ended up using:
    [code]

    $(document).ready( function () {
    var oTable = $('#schedule').dataTable( {
    "sScrollY": "500px",
    "sScrollX": "100%",
    "sScrollXInner": "150%",
    "bFilter": false,
    "bSort": false,
    "bInfo": false,
    "bPaginate": false
    } );
    $('#form').submit(function () {
    $("input[name='modify_booking[]']").remove();
    $("input:checked", oTable.fnGetNodes()).each(function(){
    $('')
    .css("display", "none")
    .appendTo('#form');
    });
    });
    new FixedColumns( oTable );
    } );

    [/code]

    I wish there was a better solution than this though, as I have several forms on different pages that have different input names (modify_booking, delete_booking, etc). I currently have this JS in a header include file, and need to duplicate it for each different form.
This discussion has been closed.