LaGuille LaGuille - 9 months ago 21
PHP Question

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

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;


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 Source

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.