Challenge with javascript/jquery $.get and python backend

Question

I have an HTML form to enter a username/password to register for a site. I am attempting to implement a javascript/JQuery $.get to send an HTTP GET to check if the username is already in use. On the server side, the "username" value (pulled by request.form.get()) is coming back as None. The javascript source does not seem responsive either on the HTML page.

Javascript as below:

var username = document.getElementById("username");
var inputForm = document.getElementById("form");

document.getElementById("submit").addEventListener("click", function(event) {
             event.preventDefault()
});

inputForm.onclick = function(data) {
    $.get("/check?username=" + username.value, function() {
        alert("CHECKING")
        if (data == false) {
            inputForm.submit();
        }
        else {
            alert("Sorry - that username is taken!");
        }
    });
};

Python (Flask) on backend as follows:

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

print("***RUNNING CHECK***")
# get username from web form
username = request.form.get("username")
print(username)

# check that username is longer than 1, then pull list from DB to check against
if len(username) > 1:
    usernames = db.execute("SELECT username FROM users")

# return false if username is available
if username in usernames:
    return jsonify(False)

# return true if username is NOT available
else:
    return jsonify(True)

This is what comes back:

TypeError: object of type 'NoneType' has no len() INFO:werkzeug:192.168.179.21 - - [22/Aug/2019 16:20:41] "GET /check?username=ajd HTTP/1.0" 500 -

You're sending the username through `QueryString`, not `form-data`. I don't know python, but I'm almost sure that's where lies your problem. Probably: `request.args.get('username')` instead of `request.form.get("username")` — silentw, Aug 22 '19 at 16:50
Possible duplicate of [How do you get a query string on Flask?](https://stackoverflow.com/questions/11774265/how-do-you-get-a-query-string-on-flask) — silentw, Aug 22 '19 at 16:51

score 0 · Accepted Answer · answered Aug 22 '19 at 16:53

0

The client side issue that I can see are...

Checking the Javascript console will probably tell you that data is undefined. If should be added as a parameter to the callback function.
You need to escape the get paramters with encodeURIComponenet.
You probably want to run this code when the input is received than when the form is clicked on.

username.oninput = function(data) {
  $.get("/check?username=" + encodeURIComponenet(username.value), function(data) {
    alert("CHECKING")
    if (data == false) {
      inputForm.submit();
    } else {
      alert("Sorry - that username is taken!");
    }
  });
};

answered Aug 22 '19 at 16:53

I wrestled a bear once.

22,983
19
69
116

1

Even though that's some good suggestions, it won't solve OPs problem. The problem lies within how he is pulling the data on the [python] endpoint. – silentw Aug 22 '19 at 16:56
@silentw - i'm not familiar with python but it is definitely half of the solution. even if the back end was working as expected the front end would still be "unresponsive" because `data` is undefined. – I wrestled a bear once. Aug 22 '19 at 16:58
Hey at least OP posted enough code to evince the problems. I've seen worse questions from new users who skipped the tour. – Jared Smith Aug 22 '19 at 17:01
Thank you @silentw - using 'request.args.get' worked and solved the issue. And I learned something! Thanks again. – Adam DeCaria Aug 22 '19 at 17:11

Challenge with javascript/jquery $.get and python backend

1 Answers1