0

My final project is a conversion website. I am trying to make a dropdown menu that when you click one of the options in the DD, you are taken to another page. When I put in the following code (from W3 schools) and I click the dropdown box, my page keeps reloading. Why does it keep reloading rather than just showing whatever is in the dropdown list? I assume it is because it is within the < form >.

index.html

{% extends "layout.html" %}

{% block title %}
index
{% endblock %}

{% block main %}
<form action="{{ url_for('index') }}" method="post">
      <div class="dropdown">
      <button onclick="myFunction()" class="dropbtn">Choose a unit</button>
                <div id="myDropdown" class="dropdown-content">
                    <a href="#Length">Length</a>
                    <a href="#Time">Time</a>
                    <a href="#Mass">Mass</a>
                    <a href="#Temperature">Temperature</a>
                    <a href="#Volume">Volume</a>
                </select>
            </div>
            <div class="hero-convert">
                <label for="Convert">Convert:</label>
                <input autocomplete="off" autofocus class="form-control" name="amount" placeholder="how much?" type="text"/>
                <select class="form-control" id="sel1">
                    <option>pounds</option>
                    <option>kilograms</option>
                    <option>milligrams</option>
                    <option>ounces</option>
                    <option>ton</option>
                    <option>stones</option>
                    <option>micrograms</option>
                </select>
                to
                <select class="form-control" id="sel2">
                    <option>pounds</option>
                    <option>kilograms</option>
                    <option>milligrams</option>
                    <option>ounces</option>
                    <option>ton</option>
                    <option>stones</option>
                    <option>micrograms</option>
                </select>
            </div>
            <div class="hero-button">
                <button class="btn btn-default" type="submit">Convert</button>
            </div>
</form>
{% endblock %}

button.js

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
  }
}
}
}

CSS

.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
0

I took this all out of the form and it works. We will see what impact this has later in the mix.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .