Input text fields and saveContent() modification in REDIPS.drag

Post shows modification of REDIPS.drag.saveContent() method. I got a lot of questions regarding how to save values from input fields (embedded in DIV element). Source below will search for input text fields and append values to query string and JSON object. Please pay attention to the highlighted line inputField = cn.getElementsByTagName(‘input’).

function mySaveContent (tbl, type) {
    var query = '',      // define query parameter
        tbl_start,       // table loop starts from tbl_start parameter
        tbl_end,         // table loop ends on tbl_end parameter
        tbl_rows,        // number of table rows
        cells,           // number of cells in the current row
        tbl_cell,        // reference to the table cell
        cn,              // reference to the child node
        id, r, c, d, i,  // variables used in for loops
        inputField,      // input field reference inside DIV element
        JSONarray,       // array of values for JSON object
        JSONobj = [],    // prepare JSON object
        pname = REDIPS.drag.saveParamName; // set parameter name (default is 'p')
    // if input parameter is string, then set reference to the table
    if (typeof(tbl) === 'string') {
        tbl = document.getElementById(tbl);
    }
    // tbl should be reference to the TABLE object
    if (tbl !== undefined && typeof(tbl) === 'object' && tbl.nodeName === 'TABLE') {
        // define number of table rows
        tbl_rows = tbl.rows.length;
        // iterate through each table row
        for (r = 0; r < tbl_rows; r++) {
            // set the number of cells in the current row
            cells = tbl.rows[r].cells.length;
            // iterate through each table cell
            for (c = 0; c < cells; c++) {
                // set reference to the table cell
                tbl_cell = tbl.rows[r].cells[c];
                // if cells is not empty (no matter is it allowed or denied table cell) 
                if (tbl_cell.childNodes.length > 0) {
                    // cell can contain many DIV elements
                    for (d = 0; d < tbl_cell.childNodes.length; d++) {
                        // set reference to the child node
                        cn = tbl_cell.childNodes[d];
                        // childNode should be DIV with containing drag class name
                        // and yes, it should be uppercase
                        if (cn.nodeName === 'DIV' && cn.className.indexOf('drag') > -1) {
                            // prepare query string
                            query += pname + '[]=' + cn.id + '_' + r + '_' + c;
                            // initialize JSONarray array
                            JSONarray = [cn.id, r, c];
                            // try to find input elements inside DIV element
                            inputField = cn.getElementsByTagName('input');
                            // loop goes through all found input elements
                            for (i = 0; i < inputField.length; i++) {
                                query += '_' + inputField[i].value;
                                JSONarray.push(inputField[i].value);
                            }
                            // add '&' to the data set
                            query += '&';
                            // push values for DIV element as Array to the Array
                            JSONobj.push(JSONarray);
                        }
                    }
                }
            }
        }
        // prepare query string in JSON format (only if array is not empty)
        if (type === 'json' && JSONobj.length > 0) {
            query = JSON.stringify(JSONobj);
        }
        else {
            // cut last '&' from query string
            query = query.substring(0, query.length - 1);
        }
    }
    // return prepared parameters (if tables are empty, returned value could be empty too) 
    return query;
};

Just to note that this modification is related to the REDIPS.drag library. So, if some project needs input values in DIV elements, shown function can be saved to the local script.js file and instead of calling REDIPS.drag.saveContent(), call mySaveContent(). I hope that presented JS code will be helpful for similar modifications of original “save” functionality.