How to pass values from form to datatables - ajax

Question

I am playing with laravel and datatables.
Here is the table with filtering option in the form I want to understand.
Basically configured routes and controllers as in the example but cannot dynamically get values from a drop down list below via ajax.
<select class="form-control" id="asortment" name="asortment">
<option value="68">A</option>
<option value="5">B</option>
...
Javascript responsible for ajax communication:
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script>
$(document).ready( function () {
$('#datatable').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
url: "{{ route('api.products.index') }}",
data: function (d) {
d.product = $('input[name=product]').val();
d.fromDate = $('input[name=fromDate]').val();
d.toDate = $('input[name=toDate]').val();
d.asortment = $('input[name=asortment]').val();
},
},
"columns": [
{ "data": "Name", },
{ "data": "Type" },
{ "data": "Asortment" },
{ "data": "Margin" }
]
});
});
$('#search-form').on('submit', function(e) {
oTable.draw();
e.preventDefault();
});
</script>
My API controller looks like this:
class APIController extends Controller
{
public function getProducts(Request $request)
{
$product = $request->input('product');
$fromDate = $request->input('fromDate');
$toDate = $request->input('toDate');
$asortment = $request->input('asortment');
$query = DB::select('exec test.dbo.Products #startDate = ?, #endDate = ?, #asortment = ?, #produkt = ?', [$fromDate, $toDate, $asortment, $product]);
return datatables($query)->make(true);
}
}
Problem: Ajax takes 3 values (product, fromDate, toDate) but doesn't accept asortment, which is in select form.
I need a little help on why...:)

Answer 1

Instead of Using $('input[name=asortment]').val(); change it to $("#asortment").val(); (Pure jQuery way!).
$('input[name=YOUT_NAME]').val(); doesn't work with Radio Button/Select/Checbox.
val() allows you to pass an array of element values. This is useful
when working on a jQuery object containing elements like , , and s inside of a
. In this case, the inputs and the options having a value that
matches one of the elements of the array will be checked or selected
while those having a value that doesn't match one of the elements of
the array will be unchecked or unselected, depending on the type. In
the case of s that are part of a radio group and
s, any previously selected element will be deselected.
Setting values using this method (or using the native value property)
does not cause the dispatch of the change event. For this reason, the
relevant event handlers will not be executed. If you want to execute
them, you should call .trigger( "change" ) after setting the value.
This is mentioned in jQuery's documentation.