My JQuery doesn't do anything in /check pset7 finance

Question

So I'm currently working in the /check route and have tried to make it work to no avail. I'm pretty sure the error lies in my JQuery but I don't know how to fix it. Any help is aprreciated.

register.html:

{% extends "layout.html" %}

{% block tite %}
    Register
{% endblock %}

{% block main %}

<form action="/register" method="post" id="form">
    <div class="form-group">
        <input name="username" placeholder="Username" id="username" autocomplete="off" autofocus class="form-control" type="text" required>
    </div>
    <div class="form-group">
        <input class="form-control" name="password" placeholder="Password" type="password" required>
    </div>
    <div class="form-group">
        <input class="form-control" name="confirmation" placeholder="Confirm password" type="password" irequired>
    </div>
    <button class="btn btn-primary" type="submit" id="register">Register</button>
    <script>

    $(document.querySelector("#register").on('click', function( event ) {

            event.preventDefault();

            $.get("/check", {username: document.querySelector("#username")}, function ( resp ) {

                returned = console.log( resp );

            })
            if (returned.value == false) {
                alert("Username is already taken!");
            }
            else {
                document.querySelector("#form").submit();
            };
        });

    </script>
</form>

{% endblock %}

/check route:

@app.route("/check", methods=["GET"])
def check():
    """Return true if username available, else false, in JSON format"""

    username = request.args.get("username")
    current_usernames = db.execute("SELECT username FROM users")
    for check_username in current_usernames:
        if username == check_username:
            return jsonify("true")
    return jsonify("false")

Answer 1

If I remember correctly, .on('click', is a jQuery feature. But document.querySelector("#register") is a regular Element. Element inherits from EventTarget, so you can use .addEventListener('click', instead.

Alternatively, with jQuery, one would $('#register').on('click',, I'm not sure how far that's the same.

{username: document.querySelector("#username")} looks suspicious. I would expect a .value appemded tp that element, to extract the text.

Be aware of the async nature of $.get, the callback will be executed much later, so you can't use it to set variables you immediately use (the callback is enqueued after the request has returned). The if would have to go into the callback function. You might have to prevent the form from submitting before that is executed.

You could avoid the loop in your check function if you added a WHERE clause to your SQL query. And you should jsonify True and False, boolean values, not strings. Would still work because of JavaScript's "abstract equal" == operator, but it's not according to the problem specification.