0

So I have made my JQuery capable of making the AJAX request. However, I have a few issues. First, in my IDE console it appears that I'm saying

SELECT * FROM users WHERE username =NULL

when it should be the username I entered instead of the NULL.

Then, I have trouble accessing the return data. Per my code, it should return JSON "True" and then submit the form. However, I am still unable of submitting it. Any help is appreciated.

/check route:

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

    username = request.form.get("username")
    current_usernames = db.execute("SELECT * FROM users WHERE username =:username", username = username)
    if len(current_usernames) > 0:
        return jsonify("False")
    else:
        return jsonify("True")

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.getElementById("register").addEventListener('click', function( event ) {

            event.preventDefault();
    });

    $(document).ready(function() {
        document.getElementById("register").addEventListener("click", function() {
            var username = document.getElementById("username").value;
            $.get("/check", {username: username}, function(data) {
                if (data.value == "False") {
                    alert("Username is already taken!");
                }
                else {
                    document.querySelector("#form").submit;
                }
            });
        });
    });

    </script>
</form>

{% endblock %}
1

data in this case will be a JavaScript value representing the interpreted JSON content (jQuery by default does some "magic" in the background based on the reported content type, see the dataType setting for more information), in your code example that's a string. Strings don't have a value property, so I would assume data.value to be undefined (JavaScript's soft-fail for non-existent properties). Use data without .value instead.

BTW, your Python function should not use strings "True" and "False", but the boolean values True and False. Those at the JavaScript end will be booleans again, in JS those have the names true and false.

I'd combine the two event listeners to one. But since preventDefault should not stop propagation, I think it should not change how the code works.

3
  • Thank you for your help. I do have anothero question tho. How do you think I can access username's value so that it actually returns the username. Should I use document.querySelector or something else? – Omi11 Nov 28 '19 at 15:06
  • Not sure what you mean. .value is correct in document.getElementById("username").value, just not in data.value. – Blauelf Nov 28 '19 at 15:11
  • Yeah but when I send username to my application.py I see in the terminal the SQL command in green SELECT * FROM users WHERE username =NULL. Is it an error in my application or the way I define the username variable? – Omi11 Nov 28 '19 at 15:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .