Select link menu with go button

Question

This is a dropdown selection box where user can choose page and then click the submit button to go to that page Im using Django 2.2, don't know how to make the button go to the selected link

gradovi.html

{% block content %}

<div class="row">
    <form>
        <div class="input-field">
            <select>
                <option value="" disabled selected>Izaberite grad</option>
                {% for grad in gradovi %}
                <option value="{{grad.grad_slug}}">{{grad.grad_ime}}</option>
                {% endfor %}
            </select>
            <label>Materialize Select</label>
        </div>
        <button class="btn waves-effect waves-light" type="submit" name="select">
            <i class="material-icons right">send</i>
        </button>
    </form>
</div>

{% endblock %}

Thanks to @Diego Avila this is final code

{% block content %}

    <div class="row">
            <div class="input-field">
                <select id="select">
                    <option value="" disabled selected>Izaberite grad</option>
                    {% for grad in gradovi %}
                    <option value="{{grad.grad_slug}}">{{grad.grad_ime}}</option>
                    {% endfor %}
                </select>
            </div>          
        <button class="btn" onclick="redirectToMyPage();"><i class="material-icons">send</i></button>
    </div>
    <script>
        function redirectToMyPage(){
            location.href = document.getElementById('select').value;
        }
    </script>

{% endblock %}

what is the value to "{{grad.grad_slug}}" is a external URL or django urls ? and the idea is whe the user select and option and click on button Send gotto this URL? — Diego Avila, Jun 25 '19 at 16:11
@DiegoAvila it's slugs for gradovi: 'zagreb', 'split', 'osijek'... and yes, when clicked, a link should go to /*grad_slug* — Isus von Bier, Jun 25 '19 at 16:16

score 1 · Accepted Answer · answered Jun 25 '19 at 16:24

maybe you can try some thing like this:

1.- using the event change to redirec to url:

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
    <option value="">Select...</option>
    <option value="http://google.com">Google</option>
    <option value="http://yahoo.com">Yahoo</option>
</select>

here is detected the option and get the value to redirect an url.

Another option with a button si create a custom JavaScript function to get this value and redirect:

2.- with custom function JavaScript:

function redirectToMyPage(){
 optionSelected = document.getElementById('mySelect').value;
 //redirec to my url
 window.location.replace(optionSelected);
 
}//end function redirectToMyPage

<select id="mySelect">
    <option value="" disabled selected>Select...</option>
    <option value="http://google.com">Google</option>
    <option value="http://yahoo.com">Yahoo</option>
</select>
<button onclick="redirectToMyPage();">Go !</button>

in this case i get the value of option selected and next make a redirec to url, for more details please check this: Redirect to URL

good luck..!!

Thank you! This was exactly what I was looking for – Isus von Bier Jun 25 '19 at 16:33 — Isus von Bier, Jun 25 '19 at 16:33

Select link menu with go button

1 Answers1