Multiple select filters with ajax post

Question

I have 4 select lists with following ID's: price_sort, power_sort, area_sort, source_sort. And i'm using jQuery .change() function, to send POST data with ajax to get response from controller with sorted results.

Javascript:

        $('#price_sort').change(function () {
            var price_sort = $(this).val();

            // sessionStorage.setItem('product', $(this).val());

            $.ajax({
                method: 'post',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: '/products/filters',
                data: {
                    order: price_sort
                },
                success: function(data) {
                    $('#products').html(data.products_view);
                    // console.log(data);
                },
                error: function(jqxhr, status, exception) {
                    console.log('Error ' + exception);
                }
            });
        });

Currently i made it working with just 1 select, but how do i track with .change() all 4 select lists and send data?

Why the hell it's marked as duplicate, Rory? Your link to a question is different than mine. — Alexander Kim, Jul 09 '18 at 09:16

score 1 · Answer 1 · answered Jul 09 '18 at 09:09

1

Instead of using an ID as you do in $('#price_sort').change, make use of a Class that you give to all select functions.

You need to make it like this $('.price_sort').change and give all your selects this: class="price_sort" instead of id="price_sort"

answered Jul 09 '18 at 09:09

Danoctum

321
5
16

Well, if i do so, how i'm supposed to record values in to a different variables? – Alexander Kim Jul 09 '18 at 09:14
You can still leave the id="" on there and then get the value from the id [like this](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) – Danoctum Jul 09 '18 at 09:18

madalinivascu · Accepted Answer · 2018-07-09T09:18:06.127

I suggest you send all 4 values over ajax like this:

$('#price_sort,#power_sort,#area_sort,#source_sort').change(function () {
            var price_sort = $('#price_sort').val();
            var power_sort= $('#power_sort').val();
            var area_sort= $('#area_sort').val();
            var source_sort= $('#source_sort').val();

            // sessionStorage.setItem('product', $(this).val());

            $.ajax({
                method: 'post',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: '/products/filters',
                data: {
                    price_sort: price_sort,
                    power_sort: power_sort,
                    area_sort: area_sort,
                    source_sort: source_sort
                },
                success: function(data) {
                    $('#products').html(data.products_view);
                    // console.log(data);
                },
                error: function(jqxhr, status, exception) {
                    console.log('Error ' + exception);
                }
            });
        });

if you want to sort by a single type then i suggest you get the id and pass it as a type of sort

$('#price_sort,#power_sort,#area_sort,#source_sort').change(function () {
var sortType = this.id;
var order = $(this).val();
...
 data: {
  order:order,
  sortType:sortType 
}

Multiple select filters with ajax post

2 Answers2