Question

0

44

Views

Appending URL Parameters

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>

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-25T03:19:05.041Z

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>