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 (I.E. 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>

bjernie · Accepted Answer · 2020-07-09 22:49:58Z

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');

answered Jul 9, 2020 at 22:49

bjernie

1784 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

find_all Over a year ago

Yes, you are correct. But how do I attach an id to the Flask Form such that it could be read by the document.getElementById. My code is above and you can see how because it is rendered by Jinja, I can't as easily ad an id... or can I?

bjernie Over a year ago

@find_all in your case, the id of the form is service because the form fields is called service

find_all Over a year ago

Ok, this worked somewhat. I'm going to give you an upvote for that. But I am still not getting the value, just an empty object. I thought I could bypass this by using typeof in my conditional (I.E. Null vs String for example) but when I use this I just get an empty object, whether there is a string in the field or nothing at all. Will be happy to accept your answer if we can figure out how to get it to work for a conditional.

find_all Over a year ago

Ok, figured it out by using .value and testing for string lengths. Going to accept your answer.

Collectives™ on Stack Overflow

Loader with Javascript in Flask WTForms

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related