PHP - Retrieving $_GET variable after submitting form and change URL

Question

I have the following form I want to use to filter through products on my website:

<div class="top-filter-select-container">
    <form method="GET" action="" id="sort-filter-pick">
        <select class="selectpicker" id="sort-filter">
            <option value="popularity">Sort by Popularity</option>
            <option value="ratings">Sort by Ratings</option>
            <option value="newest">Sort by Newest</option>
            <option value="lowest">Sort by Lowest Price</option>
        </select>
    </form>
</div>

I am trying to reload my page when an option is selected using jQuery form.submit() and retrieve the selected option to be used for filtering with a SQL query. I would eventually want to use this value along with other filtering values for a more complex filtering.

$(function(){
    $('#sort-filter').on('change', function() {
        var action = $(this).val();
        $("#sort-filter-pick").attr("action", "?sort=" + action);
        this.form.submit();
    }); 
});

To test my code, I am just trying to echo isset($_GET['sort']) ? $_GET['sort'] : null; echo isset($_GET['sort']) ? $_GET['sort'] : null;

The code works if I change form method to POST instead of GET but doesn't work with GET . On websites such as Amazon, the GET form method is used when applying filters from a select option but I also notice that the ?sort= ... is added to the page URL after the form is submitted, which is not the case for me if I use GET . I was wondering what would be the right approach to do the same thing.

Answer 1

If you add a "name" to your form-elements you don't need to manually add the sort-criteria with jQuery.

HTML:

<div class="top-filter-select-container">
   <form method="GET" action="" id="sort-filter-pick">
       <select class="selectpicker" name="sort" id="sort-filter">
           <option value="popularity">Sort by Popularity</option>
           <option value="ratings">Sort by Ratings</option>
           <option value="newest">Sort by Newest</option>
           <option value="lowest">Sort by Lowest Price</option>
        </select>
    </form>
</div>

Javascript:

$(function(){
    $('#sort-filter').on('change', function() {
        this.form.submit();
    }); 
});

Or you could just use location.href = url rather than posting the form.