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)