How to call a flask function from server using onBlur in HTML?

Question

I'm new to Flask and I am trying to make a simple signup page. Here is the code-

{% extends 'layout.html' %}
{% block body %}

<div class="container">
        <form method="post" action="{{ url_for('signup') }}">

                <label for="user">Username </label>
                <input type="text" id="user" name="user" onblur='NameCheck()'>

               <i id='acceptIC' class="fas fa-check-circle"></i>


                <label for="pas">Password </label>
                <input type="password" id="pas" name="pas">


                <label for="mail">Email ID </label>
                <input type="email" id="mail" name="mail">

            <button type="submit">Signup</button>
        </form>
</div>

{% endblock %}

I wish to display a font awesome icon next to the username as soon as it looses focus, this icon is green if the username is available (database in MongoDB) and red if it isn't.

`onblur` is JavaScript and has nothing to do with Flask. You basically need to setup JavaScript event handler for 'onblur`. — hcheung, May 16 '18 at 13:23
Alright, and can I trigger an external Python script from it? If not, what is the alternative? — Bhaskar, May 17 '18 at 06:39
Of course yes. When you submit a html POST form, you will need to setup the Flask route to handle it. Something like `@app.route("signup", methods=['POST'])`. — hcheung, May 17 '18 at 12:29
Read the "Accessing Request Data" section [here](http://flask.pocoo.org/docs/1.0/quickstart/) — hcheung, May 17 '18 at 12:53
Thanks for the reply @hcheung but I want to trigger the function before the user submits the form. Like a auto check for available Usernames. — Bhaskar, May 17 '18 at 13:24
That is also no problem. Just use an Ajax call to your route and you are fine. — MrLeeh, May 17 '18 at 13:54

Bhaskar · Accepted Answer · 2018-09-19T03:36:26.717

This can be achived by using flask-socketio in your onBlur call a javascript function like-

function NameCheck(data) {
if (data !== '') {
    sock.emit('name_check', data);
    sock.on('responded', function (msg) {
        if (msg) {
            document.getElementById('acceptIC').style['display'] = 'flex';
           }
    });
}
}

In flask socketio call

@socketio.on('name_check')
def handle_name(data):
    socketio.emit('responded', Mongo.checkUser(data))

where

Mongo.checkUser(data)

is your required function. Returns a bool value

How to call a flask function from server using onBlur in HTML?

1 Answers1