Changing the HTML page depending on dropdown selection

Hi all.

I am struggling to find the correct post to help me.

I have a simple search feature on my website, two dropdowns (Category and Location) and the search button.
I want to have the City dropdown required.

Here is a breakdown;

[code=html]<select class=”form-control” title=”” id=”category”>
<option value=””>All</option>
<option value=”-bed-breakfast”>Bed &amp; Breakfast</option>
<option value=”-self-catering”>Self-Catering Guesthouse</option>
<option value=”-backpackers”>Backpackers</option>
<option value=”-hotel”>Hotel</option>
</select>[/code]

[code=html]<select class=”form-control” title=”Location” id=”location” required>
<option value=”-city1″>City 1 Name</option>
<option value=”-city2″>City 2 Name</option>
<option value=”-city3″>City 3 Name</option>
<option value=”-city4″>City 4 Name</option>
</select>[/code]

When the Search / Submit button is clicked, I need the form to perform an action along the lines of merging the two options selected.
There needs to be a preloaded “accommodation” already, so for example, if the user selects (Hotel) and (City 1 Name), the button needs to send the user to the following page: [B]accommodation-hotel-city1.html[/B]

The Category selection can also be left blank/unselected, but the Location needs to be required, so a result can be: [B]accommodation-city1.html[/B]

Is there a simple way of getting this done?

Thanks.

Also in #HTML _↴