Loader with Javascript in Flask WTForms

Question

I am attempting to include a loading icon with Javascript in my Flask App that uses WTForms. I have the loader set up as an onclick event that sets the loader to being shown upon button click. The problem is, it shows the loader upon click even if the Form is not validated (IE has nothing in it).

Normally I would just check the form like:

HTML:

<input type="submit" class="btn btn-outline-info" name="submit_button" value="Retrieve Data" onclick="test1()">
<div id='loader' class="loader"></div>

JS:

window.onload = function () {

         document.getElementById("loader").style.display = "none";
}
function test1() {
var user_input = document.getElementById('form').value;
if (user_input) {
    document.getElementById("loader").style.display = "block";
}
}

How can I check the value of a WTForm using Javascript, WITHOUT resorting to waiting for the data to come all the way through the Flask API (no point in having a loader if it only shows up as the data comes through anyway)?

This is my WTForms code:

<div class="form-group">
{{ form.service.label(class="form-control-label") }} {% if form.service.errors %} {{ 
form.service(class="form-control form-control-lg
is-invalid")}}
<div class="invalid-feedback">
{% for errors in form.service.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %} {{ form.service(class="form-control form-control-lg") }} {% endif %}
</div>

Answer 1

As far as i understand it, you're trying to check if there is a value in an input field, which is inside a form.

I interpret this line:

document.getElementById('form').value;

like you give it the id of the form and not the input field you are checking. And you can't do that because, it will always return false.

What you instead need to do is get the value from the specific input field, and not the whole form.

That means inserting the id of the input field you are checking, into the document.getElementById('insert input field id');