I'm trying to be able to append URL parameters when somebody selects from a dropdown list. I want somebody to be able to select a series and then select a year. I've tried several things and nothing works. I'm not very familiar with Javascript but I have managed to get one parameter to append just not checking to see if one is already there and then append another one.
Below is my code.
<center><select id="seasondropdown" class="scheduledropdown" size="1" name="links" onchange="window.location.href=this.value;">
<option value="/results">Combined</option>
<option value="/results/?series=latemodels">Late Models</option>
<option value="/results/?series=modifieds">Modifieds</option>
</select></center>
<script>
var select = document.getElementById('seasondropdown');
var option;
for (var i=0; i<select.options.length; i++){
option = select.options[i];
if (option.value == window.location.href){
option.setAttribute('selected', true);
}
}
</script>
<center><select class="scheduledropdown" size="1" name="year" onchange="window.location.href=this.value;">
<option value="/results/?year=2022">2022</option>
<option value="/results/?year=2021">2021</option>
<option value="/results/?year=2020">2020</option>
</select></center>
<script>
var select = document.getElementById('seasondropdown');
var option;
for (var i=0; i<select.options.length; i++){
option = select.options[i];
if (option.value == window.location.href){
option.setAttribute('selected', true);
}
}
</script>
Ok so, I think it is better to have a submit button. When you click on it, the button will retrieve the value of both selects and put it as parameters in the URL. Here is what I have:
<center>
<select id="seasondropdown" class="scheduledropdown" size="1" name="links">
<option value="/results">Combined</option>
<option value="/results/?series=latemodels">Late Models</option>
<option value="/results/?series=modifieds">Modifieds</option>
</select>
<select id="yeardropdown" class="scheduledropdown" size="1" name="year">
<option value="?year=2022">2022</option>
<option value="?year=2021">2021</option>
<option value="?year=2020">2020</option>
</select>
<button id="btnSubmit">Submit</button>
</center>
<script>
var select1 = document.getElementById('seasondropdown');
var select2 = document.getElementById('yeardropdown');
var btn = document.getElementById('btnSubmit');
btn.onclick = function(e) {
e.preventDefault();
var value1 = select1.value;
var value2 = select2.value;
window.location.href = value1 + value2
}
</script>