0

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)
2
  • Could you show the HTML code as well, especially what your username input looks like? – Blauelf Jul 9 '19 at 7:27
  • updated. But the issues were fixed with your other comments. – PRotella Jul 9 '19 at 12:09
0

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.

2

You must log in to answer this question.

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