get hidden row content from datatable and submit it along with the form

Question

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, create hidden elements and append them to the existing visible table elements before submitting the form. I tried the below code, but it isn't working.

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

           var nNodes = oTable.fnGetHiddenTrNodes();
           for ( var i=0 ; i<nNodes.length ; i++ )
           {
               var nHidden = document.createElement( 'input' );
               nHidden.type = 'hidden';
               nHidden.name = "hidden_input_"+i;
               nHidden.value = $('input', nNodes).val();

               //alert(nHidden.value);
               this.appendChild( nHidden );
           }

           $("#form").submit();   


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

   });

Any help is greatly appreciated.

Answer 1

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

       //Loop through the TR records
       oTable.$("tr").each(function(index, nRow){
            //Select the input from the row
            //var rowInput = $("input", nRow);
            //Select the text area from the row
            //var rowTextarea = $("textarea", nRow);

            //Add to form
            var nHidden = document.createElement( 'input' );
            nHidden.type = 'hidden';
            nHidden.name = "hidden_input_"+index;

            //Assuming there is one input per row
            nHidden.value = $("input", nRow).val();
            //alert(nHidden.value);
            $("#form").append( nHidden );
        });

        $("#form").submit();         
    }else {
        validator.focusInvalid();
        return false; 
    }    
});

Answer 2

Alright.! Time to wrap up. Thanks to @Bret for giving me a direction. Below is the code snippet that's finally working -

      $("#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;
        }

    });  

Thanks.