user1547174 user1547174 - 1 year ago 77
jQuery Question

How to return custom datatable input value

I have a DataTable with a generated input field and button. When I click the button, I want to console.log the value inside of the input field.. can someone help? Here's my generated table:

var productsTable = $('#productsTable').DataTable({
responsive: true,
"ajax": {
"url": "/api/products/",
"dataSrc": ""
"columns": [
{ "title": "Product Code", "data": "product_code" },
{ "title": "Supplier", "data": "supplier" },
{ "title": "Category", "data": "category"},
{ "title": "Description", "data": "description"},
{ "title": "Price", "data": "invoice_price"},
{ "title": "Quantity", "defaultContent": "<input class='quantity' type='number'>" },
{ "title": "", "defaultContent": "<button class='btn btn-primary'>Click Me!</button>" },

And here is my attempt at the click event:

$("#productsTable tbody").on('click', 'button', function() {
var quantity = $(this).parents("tr:first").find('.quantity input').val();
console.log(quantity); // returns undefined

Can someone help?

Thanks in advance!

Answer Source

Try this please

var quantity = $(this).parents("tr:first").find('.quantity').val();