Laravel select onchange update request query parameter

I have a list of users which I am using filters to filter certain parameters of the user which appends the URL using request().

My current filters are all anchors, so I am using the HREF attribute to update the url like so:

Filter By Full Time


< a href="{{route('users.index', array_merge(request()->query(), ['work_type' => 'full_time'])) }}" class="list-group-item">
Full Time

The above filter will apend the url with mysite.io/users/?work_type=full_time and filter all users who work Full Time. I have the same all working for Part Time, Temporary etc..

What I cannot work out is how to do a similar approach using a Select Menu to filter users by their city?

I have a list of cities in my database. They are dynamically added to the select menu and displaying on the page.

What I am trying to achieve is how 'OnChange' of the select menu I can pass the city ID (already the value of the select option) to the Request query paramater as &city=123

Nav

5 years ago

Best Answer

Level 20

You could try this:

<select name="city" onchange="cityChangedTrigger()" id="city">
     <option value="1">Toronto</option>
     <option value="2">Vancouver</option>
     <option value="3">Montreal</option>
</select>

and in javascript:

<script>
    function cityChangedTrigger () {
        let queryString = window.location.search;  // get url parameters
        let params = new URLSearchParams(queryString);  // create url search params object
        params.delete('city');  // delete city parameter if it exists, in case you change the dropdown more then once
        params.append('city', document.getElementById("city").value); // add selected city
        document.location.href = "?" + params.toString(); // refresh the page with new url
    }
</script>

This will refresh your page, appending the new city url parameter.

1 like

brianrevie

5 years ago

Level 1

It worked, thank you so much for your kind support and suggested answer!!

Please or to participate in this conversation.