Submit form with 2 select fields to go to different pages - html

Question

I run a joomla site and would like to create an html form within an article that does the following:
<form action="compare.html" method="post">
<select id="select1" name="select1" required="">
<option value="A">OptionA</option>
<option value="B">OptionB</option>
<option value="C">OptionC</option>
</select>
<select id="select2" name="select2" required="">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input id="submit" type="submit" />
</form>
After selecting from the 2 dropdowns and submitting the form, the user should go to a page based on the selected options. E.g.
OptionA + Option1 --> goes to page_97.html
OptionA + Option2 --> goes to page_451.html
OptionA + Option3 --> goes to page_13.html
OptionB + Option1 --> goes to page_77.html
and so on.
I was hoping this could be done in pure html or with some simple JS (I'm a newbie to js,php)?

Answer 1

I came up with the following solution which works, but I am sure this could be optimized.
<select id="select1" name="select1" required="" oninput="join_names();">
<option value="">=== SELECT ===</option>
<option value="A">OptionA</option>
<option value="B">OptionB</option>
<option value="C">OptionC</option>
</select>
<br>
<select id="select2" name="select2" required="" oninput="join_names();">
<option value="">=== SELECT ===</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<br>
<button id="compareButton" class="float-left submit-button">COMPARE</button>
<script type="text/javascript">
var urlMap = {
"default" : "/default.html",
"A1" : "/page_97.html",
"A2" : "/page_451.html",
"A3" : "/page_13.html"
"A3" : "/page_77.html"
}
function join_names() {
var input_select1 = document.getElementsByName('select1')[0].value;
var input_select2 = document.getElementsByName('select2')[0].value;
var var_select12 = concatenate(input_select1, input_select2);
var var_select12_url = getMapValue(urlMap,var_select12);
document.getElementById("compareButton").onclick = function () {
window.location.href = var_select12_url;
};
}
function concatenate(string_one, string_two) {
return string_one+string_two;
}
function getMapValue(obj, key) {
if (obj.hasOwnProperty(key)) {
return obj[key];
} else {
return obj['default'];
}
}
</script>