Is there a way to make the submit button on this form act based on the combined values of two different dropdown menus?
For instance, if "west" is selected from the first dropdown and "winter" is selected from the second dropdown, I want it to navigate to one specific URL. Similarly, if "west" and "summer" are selected, it should go to a different URL.
I've been struggling for days trying to figure this out. I have a feeling that there must be a solution to achieve this. Any help would be greatly appreciated!
This is the code I am currently using. When the button is clicked, it navigates to the URL selected in the dropdown. However, I want the values from both dropdowns to be considered together to create a unique URL upon submission. In total, there should be 16 different URLs based on the combinations of options chosen.
$(document).ready(function () {
$(".go-btn").click(function () {
location = $("#selection option:selected").val();
});
});
<div class="selCont">
<h2>Pick an Option</h2>
<select id="selection" name="selection">
<option value="1">West</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">South</option>
</select>
<select id="selection" name="selection">
<option value="1">Winter</option>
<option value="2">Spring</option>
<option value="3">Summer</option>
<option value="4">Fall</option>
</select>
<button class="go-btn" type="submit">Go</button>
</div>