Finance /Check Username=undefined

Question

I've been struggling with the check function of the Finance problem set.

It seems it's unable to identify the username within the form based on the error for the link "/check?username=undefined". I've adjusted the lookup to "getElementsbyName" and received the same result.

Am I identifying the problem wrong, or is there a different solution? Based on code from the lecture and other message boards, I'm not sure how to fix it.

html code

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

<script>
let username = document.querySelector('username');
let myForm = document.querySelector('form');
myForm.onsubmit = function() {
    $.get('/check?username=' + username.value, function(data){
        if (data == false) {
            myForm.preventDefault();
            alert('Username taken!');
        }
        else {
            myForm.submit();
        }
    });
}
</script>

Application File

@app.route("/check", methods=["GET"])
def check():
"""Return true if username available, else false, in JSON format"""
username = request.args.get("username")
if (len(username) > 0) or (len(db.execute("SELECT * FROM users WHERE username = :username", username=username)) == 0):
    return jsonify(True)
else:
    return jsonify(False)

Answer 1

You could use document.querySelector('input[name="username"]'), or probably document.getElementsByName("username")[0] (getElementsByName returns a NodeList, that's why you need to select an element). And I think myForm.elements.username or myForm.elements["username"] should work as well (assuming you initialized myForm first).

If you wait with the event.preventDefault() and call it in the AJAX callback, you are too late, the submission has already happened. $.get initiates the HTTP request, but then immediately returns. Call event.preventDefault() in the onsubmit callback.

Your Python code should probably have an and, not or. Otherwise any non-empty string would be reported back as "free" username.