Grab all data from selected row using a checkbox
Grab all data from selected row using a checkbox
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>');
},
})