1

In the 2019 edition of CS50 Finance there is a final subproblem where you have to use AJAX to ask the server if a username a new user is trying to register with is already taken, and then alert the user and block form submission if it is. Otherwise, you let the user register and proceed.

Below, please find my script (my first time using Javascript and JQuery), along with the associated HTML. Assume that the "/check" route returns "true" or "false" depending on whether the username is already taken or not. I am 100% confident this route functions properly and returns that appropriate value to function(data).

At present when I run the web app and enter a username that is already taken, the app delivers the appropriate alert. However when I try to submit a username that is not taken, it simply refuses to submit. Any guidance here on what is happening within my code would be very appreciated, as I feel at a complete loss. Happy to provide more details as needed.

Thank you!

Here is my script:

<script>
        $(document).ready(function() {
            $("#check").submit(function(event){
                var x;
                $.get("/check", {username: $("#username").val()}, function(data) {
                        if (data == "false")
                        {
                            alert("username taken");
                            x = false;
                        }
                        else if(data == "true")
                        {
                            x = true;
                        }
                });
                return x;
            });
        });
</script>

And please find the html form below:

<form action="/register" method="post" id="check">
        <div class="form-group">
            <input autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text" id="username">
        </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="Confirm password" type="password">
        </div>
        <button class="btn btn-primary" type="submit" id="register">Register</button>
    </form>
2
  • console.log(x); before you return it, and check its value. data might not be what you expect, which would mean you return undefined. Also check your browser dev tools' network tab.
    – Blauelf
    Jan 31 '19 at 18:14
  • I believe data is correct because if I simply write alert(data); the pop up on the register.html page reads true or false depending on whether the username is taken or not, suggesting check is doing its job and querying the database correctly. I also included console.log(x) just before the returning x, but could not figure out where to read its output...in the terminal window, or the console of my dev tools? Neither seemed to contain a return value. I am sorry to be asking such elementary questions, but I really am new to this and CS50 is my first experience of coding. Thank you!
    – RJPQ
    Jan 31 '19 at 21:51
0

Your data might be fine, your x is not. You are always returning undefined in your submit event handler, since the AJAX request is A, asynchronous, and your callback is executed long after submit being cancelled.

If I remember correctly, like 20 years ago (before CSS and jQuery) an option was to deactivate the form (maybe making some "Submitting..." text visible), cancel the submit, in the callback reactivate the form (and hide that first message), and on success of whatever you did in between, submit the form again from JavaScript, which does not trigger another submit event.

Disabling the form and the message would be for user experience.

I would assume this principle (always reject, and possibly submit programmatically later) still to be valid, details will vary.

2
  • Thank you for your help @blauelf. I narrowed down the issue I am facing and posted the question in a seperate thread as the question seemed to have changed substantially enough. Here is the link: cs50.stackexchange.com/questions/31055/…
    – RJPQ
    Feb 10 '19 at 12:24
  • So I eventually solved this problem by setting async to false within AJAX, and then bonding a variable in the submit function to the success function within AJAX. Perhaps not the most elegant, but it worked! Your answer pushed my thinking in this direction, even though I didn't see it at the time, so thank you very much!
    – RJPQ
    Feb 13 '19 at 16:46

You must log in to answer this question.

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