pset8 finance "/check": Dont understand how the JS code works

Question

I am currently working on the implementation of "/check" in pset8. I tried to implement it by reading trough the documentation of "event.preventDefaul()", "$.get()" and etc. functions. That is what I have:

The JS-Script:

    <script>
    var username=document.getElementById('username').value

    document.getElementById("myForm").addEventListener("submit", function(event){
        event.preventDefault()

        $.get("/check?username=", function(data) {
                    if(data == false) {
                        alert("Username taken.");
                    }
                    else {
                        $('#myForm').submit();
                    }
        });
    });
    </script>

The HTML-Code:

<form action="/register" method="post" id="myForm">
    <div class="form-group">
        <input autocomplete="off" autofocus class="form-control" name="username" id="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="confirmation" placeholder="Password-Confirmation" type="password">
    </div>

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

The Python code:

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

username = request.args.get("username")

check_username = db.execute("SELECT * FROM users WHERE username = :username", username = username)

if check_username:
    return jsonify(False)
else:
    return jsonify(True)

I think the Python and HTML Part is fine. But I have really problems to understand the JS-Script. I understand as follows:

document.getElementById("myForm").addEventListener("submit", function(event){
    event.preventDefault()

This part stops the page to make a actual submit and "pause" the page.

document.getElementById("myForm").addEventListener("submit", function(event){
    event.preventDefault()

    $.get("/check?username=", function(data) {
                if(data == false) {
                    alert("Username taken.");
                }
                else {
                    $('#myForm').submit();
                }
    });
});

Then the $.get() function calls the function "/check" sends the username and get a response which is then proceed as data in function(data). If data is false, the form will not be submit, if its true the form will be submit.

For now it doesn't even "pause" the page ..

Hope you can help to better understand whats going on.

Thank you very much!

Answer 1

You need to determine the user name within the submit callback, not at the time of installing the callback.

You are passing an empty value, not using Javascript variable username at all.

Use "/check?username=" + username, or more correctly "/check?username=" + encodeURIComponent(username) (in case user name contains special characters), or maybe "/check", {username: username} (leaving the encoding to jQuery).