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;

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.

value of GET does not pas in form body, they passes as url parameters — bxN5
– bxN5, Commented Mar 11, 2017 at 21:15
So how would I add my action to the URL? I guess that's my main question — LaGuille
– LaGuille, Commented Mar 11, 2017 at 21:18
since select box don't have name attribute that's wy get not working — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Mar 11, 2017 at 21:21
Ryan, isn't this what $("#sort-filter-pick").attr("action", "?sort=" + action); is suppose to do? — LaGuille
– LaGuille, Commented Mar 11, 2017 at 21:23

kyeiti · Accepted Answer · 2017-03-11 21:24:00Z

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.

answered Mar 11, 2017 at 21:24

kyeiti

3762 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

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