Grab all data from selected row using a checkbox

Grab all data from selected row using a checkbox

canwejustcodecanwejustcode Posts: 34Questions: 9Answers: 0

I have my datatable that allows the user to select a row using a checkbox. In that row, I have a dropdown (which is populated from a database) and a freeform textbox. When a user selects a row using a checkbox, I need to grab all of the data in that row so I can save it to a Table. So far, I really haven't found any examples with what I'm looking to do, so looking for some advice. I'm able to determine if the checkbox is checked and get the { label }. however, I'm not abel to get the selected dropdown value or any text entered into the textbox. I do allow the users to select 1 row or as many as they need.

My Code for the Datatable:

```table = $('#output').DataTable({
data: data,
destroy: true,
scrollY: "400px",
paging: false,
searching: false,
ordering: false,
bInfo: false,
columns: [
{
data: "id",
defaultContent: '',
render: function (data, type, full, meta) {
return '<input type="checkbox" name="include" id="include" value="' + data + '"disabled>';
}
},
{
data: "makeId",
defaultContent: '',
render: function (data, type, full, meta) {
return '<input type="checkbox" name="makeId" id="makeId" value="' + $('<div/>').text(data).html() + '">';
}
},
{
data: "label"
},
{
data: "region",
defaultContent: '',
render: function (data, type, full, meta) {
var $select = $("<select class='form-select form-select-sm' id='region' name='region'></select>", {
"id": "region"
});
$.each(data, function (k, v) {
var $option = $("<option></option>", {
"text": v,
"value": v,
});
if (data === v) {
$option.attr("selected", "selected")
}
$select.append($option);
});
return $select.prop("outerHTML");
}
},

                    {
                        data: null,
                        defaultContent: '',
                        className: 'dt-body-center',
                        render: function (data, type, full, meta) {
                            return '<input type="textbox" name="salesman" id="salesman" class="form-control form-control-sm" />';
                        }
                    },
                  ],
                dom: '<"toolbar">frtip',
                fnInitComplete: function () {
                    $('div.toolbar').html(
                        '<button onClick="exportReport()" class="btn btn-outline-light btn-sm" id="btnExport"><i class="fas fa-bolt" style = "font-size:20px;color:gold" title = "Export" > </i></button>');

                },
            })
Sign In or Register to comment.