Get hidden cell data and submit it with the form data

robert909

Hi , I'm stuck with an issue and its eating my time now. I have a table with 7 records (for instance) and this table has input and textarea elements, where a user can type in. Now with pagination having the value as 5 records per page, I have two pages. The user enters data into comments section, clicks on the "next" in the pagination and enters value in the comments section. So technically, the user entered values into both the pages as splitted by datatable pagination logic. The problem is, when the user hits save, its saving only those elements which are on focus, more easy to understand which are visible on the page. I read the API and FAQs, and its clear that datatable hides the elements which are not in focus, making them practically impossible to find in DOM. Below is the code and I need help on how can I get the data from the hidden rows using the fnGetHiddenTrNodes() method, append them to the existing visible table elements before submitting the form. I tried the below code, but it isn't working.

[code] $("#form").on("submit",function(){
if($("#form").valid()){

var nNodes = oTable.fnGetHiddenTrNodes();
for ( var i=0 ; i

robert909

By the way, I also tried below code and it didn't work as well.. :(

[code]

$("#form").on("submit",function(){
if($("#form").valid()){

$(oTable.fnGetHiddenTrNodes()).find('input').appendTo(this);

}else {
validator.focusInvalid();
return false;
}

});

[/code]

robert909

OK folks.! Waited for long time and got this chance to post answer myself. I made it work and below is the code snippet -

[code]
$("#form").on("submit",function(){
if($("#form").valid()){

var nNodes = oTable.fnGetHiddenTrNodes();

$('td', nNodes).each(function(index,ncolumn) {

var nHidden = document.createElement( 'input' );
nHidden.type = 'hidden';
nHidden.name = $("input", ncolumn).attr("name");
nHidden.value = $("input", ncolumn).val();

if(typeof(nHidden.name) != "undefined")
$("#form").append( nHidden );

nHidden = document.createElement( 'input' );
nHidden.type = 'hidden';
nHidden.name = $("textarea", ncolumn).attr("name");
nHidden.value = $("textarea", ncolumn).val();

if(typeof(nHidden.name) != "undefined")
$("#form").append( nHidden );

nHidden = document.createElement( 'input' );
nHidden.type = 'hidden';
nHidden.name = $("textarea", ncolumn).attr("name");
nHidden.value = $("textarea", ncolumn).val();

if(typeof(nHidden.name) != "undefined")
$("#form").append( nHidden );

nHidden = document.createElement( 'input' );
nHidden.type = 'hidden';
nHidden.name = $("select", ncolumn).attr("name");
nHidden.value = $("select", ncolumn).attr("value");

if(typeof(nHidden.name) != "undefined")
$("#form").append( nHidden );

});

clickedSave = true;


}else {
validator.focusInvalid();
return false;
}

});

[/code]