Passing variables using $_GET with a drop down list

Question

I have a PHP page that echo's many images to HTML from a database. I have 3 drop down menus.

1. Sort (oldest / newest)
2. Type (Jpeg or GIF)
3. Number of Images per Page (Using Pagination)

Now, for example on my sort dropdown menu I have the "Oldest" option linking to /index.php?sort=old

I can then grab that variable when the page reloads and modify my query using a select case.

Now let's say my current URL is /index.php?sort=old and all items are now sorting oldest to newest. I now decide that I also want to sort by file type as well as oldest. Let's say I want to choose Jpeg, I have the drop down for Jpeg linked to /index.php?kind=jpeg

When the page refreshes after clicking jpeg, the kind variable is only sent and the sort variable is forgotten about, therefore only leaving me with jpegs with no relation to sort order.

How can I make this work?

Do I have to modify the link on every control to include the current values of every other variable?

Answer 1

You can achieve that easily with normal HTML forms:

<form method="GET" action="/index.php">
    <select name="sort">
        <option value="oldest">Oldest</option>
        <option value="newest">Newest</option>
    </select>
    <select name="kind">
        <option value="jpeg">Jpeg</option>
        <option value="gif">GIF</option>
    </select>
    <select name="perpage">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
    </select>
    <button type="submit">Submit</button>
</form>

The GET method means it will submit form values in a GET request, appending them to the URL as you are currently doing. Whenever a value changes, just submit the form and the new URL with all parameters combined will be loaded.

Mind you this is just a simplified example. In a real-world situation you would want to persist the values previously selected in your form, like this:

<option value="newest" <?php echo(isset($_GET['sort']) && $_GET['sort'] === 'newest' ? 'selected="selected"' : ''); ?>>Newest</option>

Answer 2

Without your code, I'm not 100% sure why your particular code isn't working, but for forms using the "get" method, there are a few things you should be doing.

All data filter select boxes that you're using should be within the same form tag of your html

<form method="get">
    <select name="sort">
        <option>--</option>
        <option value="old">Oldest</option>
        <option value="new">Newest</option>
    </select>
    <select name="type">
        <option>--</option>
        <option value="jpeg">JPG</option>
        <option value="gif">GIF</option>
    </select>
    <button type="submit">Go</button>
</form>

Now, when your form submits, these values get encoded into the url for you to use the $_GET variable to grab. What you would need to do if you want to preserve the $_GET variables is ensure that your form elements remain selected through the process.

<?PHP
$oldSelected = ( $_GET['sort'] == 'old' ) ? 'selected' : '';
$newSelected = ( $_GET['sort'] == 'new' ) ? 'selected' : '';
$jpegSelected = ( $_GET['type'] == 'jpg' ) ? 'selected' : '';
$gifSelected = ( $_GET['type'] == 'gif' ) ? 'selected' : '';
?>
<form method="get">
    <select name="sort">
        <option>--</option>
        <option <?PHP echo $oldSelected ?> value="old">Oldest</option>
        <option <?PHP echo $newSelected ?> value="new">Newest</option>
    </select>
    <select name="type">
        <option>--</option>
        <option <?PHP echo $jpgSelected ?> value="jpeg">JPG</option>
        <option <?PHP echo $gifSelected ?> value="gif">GIF</option>
    </select>
    <button type="submit">Go</button>
</form>

As long as that's happening, this should be working as you described you'd like it to.

Here's a phpfiddle, which you can't see the parameters in the url, but you can see how they're working. http://phpfiddle.org/main/code/mt21-nq0e