0

guys! I have created script in "check" template, but it looks like there is something wrong with conditional part where script should select between proceeding with "submit" and preventDefault. In my case it always tries to register a new user even if the username is taken. Many thanks for your kind advice!

<script>
        // check if a username is available
        var regBtn = document.getElementById("regBtn");

        regBtn.addEventListener("click", function(event){

            var username = document.getElementById("nameInput").value;
            var res;
            getDBcheck();

            function getDBcheck() {
                $.get("/check", {username: username}, function(response){
                    res = JSON.parse(response).result;
                    if (res == false) {
                        // false means that username is not in the database and free
                        document.getElementById("regForm").submit();
                        // if true - username is already taken - to prevent submit
                    } else {
                        event.preventDefault();
                    }
                })
            }
        })
    </script>
1

You have to prevent the submission in the form's submit action (the click action of the submit button is not the only way to submit the form).

More importantly, that means the submit event listener itself, not the $.get callback. When that one is called, the form has long been submitted, as $.get by default is an asynchronous action, it triggers something, but does not wait for it to complete, that's what the callback is for.

6
  • Dear @Blauelf based on your advice I resolved one problem, but then faced another, could you please take one more look?: I used regForm.addEventListener("submit" ... instead of regBtn.addEventListener("click"..., placed command event.preventDefault(); at the 1st row of addEventListener code. Then, if username is free in $.get callback I invoke regForm.submit(); Now I see strange behaviour, while watching network tab in developers tool panel: – RomanBlade Feb 23 '19 at 17:21
  • 1. When I try to register a username that already exists in the database I see in network tab that the request to "check" route is done, and as I expect submittion of the form is cancelled. It's OK. But: 2. When I try to register a free username I see the following: Request to "check" route blinks in network tab for a tiny fraction of second, then it disappeares and I see connection to "register" route and then "/" route. Username is registered. – RomanBlade Feb 23 '19 at 17:22
  • When I ran cs50 check utility it reports that "check route did not return "true" when username is available". What direction I should dig in? – RomanBlade Feb 23 '19 at 17:22
  • They assume you do the logic the other way around, true meaning free. Change that on both ends. About the network tab, there must be a checkbox like "preserve log" that keeps requests when switching to another page. – Blauelf Feb 23 '19 at 18:49
  • Dear @Blauelf I switched true and false around in both ends. Enabled "preserved log" - it works :) But the fault in check50 remains the same. I placed both pieces of code (check route and check template) at cs50 sandbox here - link in template part you could see console.log(res) - it prints false if server responded 'false', but it does not print anything if the responce is 'true'... – RomanBlade Feb 23 '19 at 19:47

You must log in to answer this question.

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