having problem in check() in cs 50 finance

Question

The problem is i dont know why my script code is not not executing,it registers already registered users

below is my register.html

{% extends "layout.html" %}

{% block title %}
    Register
{% endblock %}

{% block main %}
    <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" placeholder="Password" type="password">
        </div>
        <div class="form-group">
            <input class="form-control" name="confirmpass" placeholder="Confirm Password" type="password">
        </div>

        <button class="btn btn-primary" type="submit">Register</button>
    </form>

    <script>
       var input = document.getElementsbyName("username");
       input.onkeyup = function(){
           $.get('/check?username=' + input.value, function(data){
               if (data == "false")
               {
               alert('Username taken!'); 
             document.getElement('form').addEventListener("submit", function(event){
             event.preventDefault();
               });
           }
       });
       }
    </script>
{% endblock %}

here is my check function

def check():
    """Return true if username available, else false, in JSON format"""
    username = request.args.get("username")
    name_exist = db.execute("SELECT username FROM users WHERE username = :username",
                          username = username)
    if(len(name_exist)>0):
        return jsonify("false")
    else:
        return jsonify("true")

Answer 1

I don't think it's a good idea to add listeners in a callback that way. They can pile up. The empty form does not seem to have one, empty form would submit, and you have no code for removing them later. The problem specification does not even mention key presses, and you could fill the form without a single one (e.g. autocomplete or copy/paste via mouse).

preventDefault() must happen in the event listener itself, not in a $.get callback which is executed much later, maybe after the form has been submitted, and especially not in a listener installed by that callback potentially executed much later. It should probably be executed by the same listener that initiates the $.get request, triggered on the form's submission.

Should be jsonify(False) and jsonify(True), encoding a boolean value, not a string. $.get would automatically parse the JSON, so the JS part should then test for true or false, or maybe truthy or falsy if you like.

Also, I interpret the specification so that an empty username should also cause jsonify(False) to be returned.