Laravel select onchange update request query parameter - php

Question

On the frontend of my Laravel application I have a list of users (people looking for work) which I have filters to filter certain parameters of the users which appends the URL using the request().
My current filters are all anchors, so I am using the HREF attribute to update the url like so:
Filter By Full Time
Full Time
The above filter will append the url with mysite.io/users/?work_type=full_time and filter all users who work Full Time. I have this all working for all filters using anchor tags and href.
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.
<select>
<option value="1">City Name 1</option>
<option value="2">City Name 2</option>
</select>
What I am trying to achieve is how 'OnChange' of the select menu I can pass the city ID to the Request query paramater as &city=2

Answer 1

You can add an event listener to the dropdown element and reload the page or anything else if you want. Let's see an example on reloading the page with the query param.
I have changed your select dropdown markup a little bit, adding an ID and a default option,
<select id="myFancyDropdown">
<option>Choose city</option>
<option value="1">City Name 1</option>
<option value="2">City Name 2</option>
</select>
Then in JS, do your thing when the dropdown is changed,
let elmSelect = document.getElementById('myFancyDropdown');
if (!!elmSelect) {
elmSelect.addEventListener('change', e => {
let choice = e.target.value;
if (!choice) return;
let url = new URL(window.location.href);
url.searchParams.set('city', choice);
// console.log(url);
window.location.href = url; // reloads the page
});
}

Answer 2

You could use a form to set the URL parameters.
<form id="myForm" method="get">
<button
id="workTypeButton"
type="button"
data-value="full_time"
onclick="setWorkTypeInput(this);"
>
Full Time
</button>
<select name="city">
<option value="1" {{ request('city') === '1' ? 'selected' : '' }}>City Name 1</option>
<option value="2" {{ request('city') === '2' ? 'selected' : '' }}>City Name 2</option>
</select>
<input id="workTypeInput" type="hidden" name="work_type" value="{{ request('work_type') }}">
</form>
Then add an event listener to submit the form if any input inside it changes. Instead of using a anchor to filter by full time, you could bind a button (workTypeButton) onclick event to a hidden input (workTypeInput) inside the form.
let myForm = document.getElementById('myForm');
let workTypeInput = document.getElementById('workTypeInput');
myForm.querySelectorAll('input, select, textarea')
.forEach(item => {
item.addEventListener('change', event => {
myForm.submit();
});
});
function setWorkTypeInput(event) {
let changeEvent = new Event('change');
workTypeInput.value = event.dataset.value;
workTypeInput.dispatchEvent(changeEvent);
}
If you use a radio or checkbox to set the work type. This way you would not need to define a onclick handler.