How to pass values from form to datatables

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...:)

replace $('input[name=asortment]').val(); with $("#asortment").val(); and give it a try. — Rutvij Kothari
– Rutvij Kothari, Commented Oct 24, 2017 at 17:59
@RutvijKothari It works. Before I tried replacing input with select and no effect. Can you just shortly explain why it is correct now? — Mike Gorski
– Mike Gorski, Commented Oct 24, 2017 at 19:06
Sorry, I explained in the answer. Comments aren't good way to explain it. — Rutvij Kothari
– Rutvij Kothari, Commented Oct 24, 2017 at 22:35

Rutvij Kothari · Accepted Answer · 2017-10-24 22:52:50Z

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.

Collectives™ on Stack Overflow

How to pass values from form to datatables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related