I'm new in Flask and I would to disable a button depending on condition. In particular, I have a page with 5 selectboxe and I would like to enable the button if a value is selected for one of them.
This is my HTML code:
<form class="form-text" method="POST">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/sections.css') }}">
<script src="{{url_for('static', filename='js/sections.js')}}"></script>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-12">
<label>Section 1:</label>
<select onselect="validate()" id="section-one" name="select_section" style="width:200px; margin-left: 30px;">
<option value="select-option"> -- select an option -- </option>
{% for each in dropdown_list %}
<option value="{{each}}">{{each}}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<div class="col-12">
<label>Section 2:</label>
<select name="select_section" style="width:200px; margin-left: 30px;">
<option disabled selected value> -- select an option -- </option>
{% for each in dropdown_list2 %}
<option value="{{each}}">{{each}}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
<button id="select-button" type="submit" class="btn btn-primary">Select</button>
...
</form>
This is my JS code:
function validate() {
var ddl = document.getElementById("section-one");
var selectedValue = ddl.options[ddl.selectedIndex].value;
var myBtn = document.getElementById("select-button");
if (selectedValue == "select-option") {
document.getElementById("select-button").disabled = true;
} else {
document.getElementById("select-button").disabled = false;
}
}
In my JS code I tried just for the first select. What's wrong? Thank you in advance.