How to post a hidden column to a form

bweith1

I have a DataTable with some visible columns (first name, last name) and one hidden column (id). I'm using the DataTable row select example to highlight the row that the user selects. When a button is pressed I am able to display the value in the hidden column for the selected row. What I'm trying to figure out is how to post that hidden value to another page as an input variable on my form.

Here's the function that my button calls, which simply displays the hidden id column that I want to post.

[code]
$('#select').click( function() {

var anSelected = fnGetSelected( oTable );

if ( anSelected.length == 0 ) {
alert('Please make a selection');
} else {

// Get data from the selected row
var aRow = anSelected[0];
var sFirstName = oTable.fnGetData( aRow, 0 );
var sLastName = oTable.fnGetData( aRow, 1 );
var sID = oTable.fnGetData( aRow, 2 );

alert('You have selected ' + sID);
}
} );
[/code]

I am unclear as to how to post this value as an input variable on a form.

I also found an example that attempts to address this but it fails to show how to actually post the value.

[code]
$(document).ready(function() {

var oTable;

$('#form').submit( function() {
var sData = $('input', oTable.fnGetNodes()).serialize();
alert( "The following would have been submitted to the form: \n\n"+sData );
return true;
} );

oTable = $('#example').dataTable();

} );
[/code]

I'm new to jQuery and DataTables, in case you hadn't guessed. :)

Thanks in advance for any help...

Brian

allan

When a column is hidden, DataTables actually removes it from the document, so its contents won't be part of the form that is posted. So to have this work as you wish, you would need to use a technique such as this to add the form elements back in.

The second code block you have is good, but fnGetNodes gets TR nodes, not TD, thus it doesn't help with the hidden columns. You would need to either use fnGetNodes on the hidden column or the fnGetTds API plug-in.

Allan

bweith1

Okay, let's assume that I can get the hidden column using fnGetTds or perhaps I decide that the column doesn't need to be hidden... How do I post the parameter to a form?

Islander

maybe this helps

i found this somewhere in the docs

When DataTables removes columns from the display (bVisible or fnSetColumnVis) it removes these elements from the DOM,
effecting the index value for the column positions. This function converts the data column index (i.e. all columns regardless of visibility)
into a visible column index.
[code]
$.fn.dataTableExt.oApi.fnColumnIndexToVisible = function ( oSettings, iMatch )
{
return oSettings.oApi._fnColumnIndexToVisible( oSettings, iMatch );
};
[/code]

When DataTables removes columns from the display (bVisible or fnSetColumnVis) it removes these elements from the DOM,
effecting the index value for the column positions. This function converts the visible column index into a data column index
(i.e. all columns regardless of visibility).
[code]
$.fn.dataTableExt.oApi.fnVisibleToColumnIndex = function ( oSettings, iMatch )
{
return oSettings.oApi._fnVisibleToColumnIndex( oSettings, iMatch );
};
[/code]

bweith1

I came up with two different solutions to this problem, which I'm posting for others who may find them useful. The basic idea is:

(a) know which row the user has selected
(b) read the value of the hidden column for that row
(c) assign the value to a hidden form field

The difference between the two solutions is when the value is assigned. In the first solution the value is assigned when the user hits the submit button. In the second solution the value is assigned every time the user clicks a row.

Solution #1: This builds on my previously posted code. Here I have simply replaced the alert dialog box with a statement that assigns the hidden value to a hidden form field using the getElementById function.

[code]
$('#select').click( function() {

var anSelected = oTable.$('tr.row_selected');

if ( anSelected.length == 0 ) {
alert('Please make a selection');
} else {
// Get data from the selected row
var aRow = anSelected[0];
var sFirstName = oTable.fnGetData( aRow, 0 ); // Don't need this anymore
var sLastName = oTable.fnGetData( aRow, 1 ); // Don't need this anymore
var sID = oTable.fnGetData( aRow, 2 ); // Hidden column

document.getElementById('hiddenUserID').value = sID;
}
} );
[/code]

In my form I have a hidden input field and a submit button that calls the function above.

[code]

Select User
[/code]

Solution #2: In this solution I am assigning the value every time the user selects a row. The code borrows from the DataTables row select example, which can be found here:

http://datatables.net/release-datatables/examples/api/select_single_row.html

[code]
/* Add a click handler to the rows */
$("#example tbody tr").click( function( e ) {

if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
} else {
oTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');

// Get the data from the selected row
var sID = oTable.fnGetData( this, 2 );
document.getElementById('hiddenUserID').value = sID;
}
});
[/code]

My form has the same hidden input field as mentioned above. My submit button also calls the function in the first solution, but only to check that a row has been selected.

Both solutions work great. I suppose which one you use depends on personal preference and needs.

allan

Excellent stuff - thank you very much for sharing your solutions with us!

Regards,
Allan