Uncaught TypeError: Cannot read property 'init' of undefined in Javascript while submitting form

I'm trying to make a social networking mini web app using python web.py module. I made a registration form in html, but when I fill the details and submit them, the browser console shows the following output:

Uncaught TypeError: $(...).ready(...) is not a function
at scripty.js:22
loaded
jquery-3.4.1.min.js:2 Uncaught TypeError: Cannot read property 'init' of undefined
at HTMLDocument.<anonymous> (scripty.js:4)
at e (jquery-3.4.1.min.js:2)
at t (jquery-3.4.1.min.js:2)

I've searched for similar problems but their solutions doesn't seem to work for this case.

Here is my "scripty.js" file code

$(document).ready(function () {
    console.log("loaded");

    $.material.init();

    $(document).on("submit", "#register-form", function (e) {
        e.preventDefault();
        console.log("form submitted");

        let form = $('#register-form').serialize(); //get the form data

        //send an ajax request over to the route /postregisteration
        $.ajax({
            url: '/postregisteration',
            type: 'POST',
            data: form,
            success: function (response) {
                console.log(response);
            }
        });
    });
})();

And here is the controller.py file code in python

import web
from Models import RegisterModel


urls = (
    '/', 'Home',
    '/register', 'Register',
    '/postregistration', 'PostRegistration'
)

render =  web.template.render("Views/Templates", base="MainLayout")

app = web.application(urls, globals())


# Classes/Routes
# Each class will be controlling a route

class Home:
    def GET(self):
        return render.Home()

class Register:
    def GET(self):
        return render.Register()

class PostRegistration:
    def POST(self):
        data = web.input()
        print(data.username)

        reg_model = RegisterModel.RegisterModel.insert_user(data)
        return data.username


if __name__=="__main__":
    app.run()

After clicking submit, it just prints "loaded" and shows the error on browser console.

But it must also show "form submitted".

Any help would be appreciable.

Change the last line of the JS you've shown:

From

})();

to

});

That fixes your first error ... is not a function.

For the second error, that means $.material is undefined. Either remove it (if you're not using material design) or make sure the corresponding plugin is available.