Шаблон модуля: попытка вернуть свойства из формы HTML (не определено)

Question

У меня есть два модуля setupUI() и registerUser() - оба возвращают объект.

Когда пользователь отправляет форму, я хочу получить значения и вернуть ее из setupUI() и перейти в regusterUser().

Проблема: В модуле init() из setUI() возвращается значение undefined. Означает ли это, что значения не установлены или есть проблема с областью действия?

Как я могу вернуть значения?

/*
*   Setup Form Ui
*   Setup data 
*
*/

var UI = setupUI();
let userFormFields = UI.init();
console.log(userFormFields);

let register =  registerUser();
console.log(userFormFields);
let res = register.createUser(userFormFields);
console.log("response",res);

function setupUI() {
    var $name = $("#name");
    var $age = $("#age");
    var $department = $("#department");
    var $position = $("#position");
    var $rego_form = $("#rego-form");

    var name;
    var age;
    var department;
    var position;

    let UIapi = {
        init: init
    }
    return UIapi;

    function init() {  
        $($rego_form).on("submit", function(e) {
            // e.preventDefault();
            name = $name.val();
            age = $age.val();
            department = $department.val();
            position = $position.val();            
            return { "name":name, "age":age, "position":position, "department":department};
        });
    }
} 

function registerUser() {
    let userApi = {
        createUser : createUser
    }
    return userApi;

    function createUser(name, age, position, department) {
        if(department == "Marketing") {
            console.log("marketing...");
            var employee = new Accountant(name, age, department. position);
            var response = { "user":employee, "response":"success" }
            return response;
        } else {
            let response = { "user":"null", "response":"Fail: Invalid creds" }
            return response;
        }    
    }  
}
 
 





/*
*   Employee Constructor 
*/
function Employee() {
    this.name = "Default Employee";
    this.age = "Default Age";
    this.department = "Default Department";
}
Employee.prototype.getName = function() {
    return this.name;
};
Employee.prototype.setName = function(name) {
    this.name = name;
};
Employee.prototype.setAge = function(age) {
    this.age = age;
};
Employee.prototype.setDepartment = function(department) {
    this.department = department;
};

/*
*   Accountant Constructor 
*/
function Accountant(name, age, department, position) {
    let employee = Object.create(Employee.prototype);
    employee.position = position;
    employee.setDepartment(department);
    employee.setAge(age);
    employee.setName(name);
    
    return employee;
}
Accountant.prototype.doTax = function() {
    console.log(`I am ${this.getName()} from ${this.getDepartment()}. Doing tax....`);
}
Accountant.prototype.getPosition = function() {
   return this.position;
};
Accountant.prototype.setPosition = function(position) {
    return this.position = position;
};


var accountant = new Accountant("John", 44, "Accounts");
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="header">
                                <h4 class="title">Edit Profile</h4>
                            </div>
                            <div class="content">
                                <form id="rego-form">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label>Company (disabled)</label>
                                                <input type="text" class="form-control" disabled placeholder="Company" value="Creative Code Inc.">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label>name</label>
                                                <input type="text" id="name" class="form-control" placeholder="name" value="michael">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Age</label>
                                                <input id="age" class="form-control" placeholder="age">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Department Name</label>
                                                <input type="text" id="department" class="form-control" placeholder="department" value="Marketing">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Position</label>
                                                <input type="text" id="position" class="form-control" placeholder="position" value="social media manager">
                                            </div>
                                        </div>
                                    </div>

                                    <button type="submit" id="rego-user-btn" class="btn btn-info btn-fill pull-right">Register</button>
                                    <div class="clearfix"></div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card card-user">
                            <div class="image">
                                
                            </div>
                            <div class="content">
                                <div class="author">
                                     <a href="#">
                                    <img class="avatar border-gray" src="assets/img/faces/face-3.jpg" alt="..."/>

                                      <h4 class="title">Mike Andrew<br />
                                         <small>michael24</small>
                                      </h4>
                                    </a>
                                </div>
                                <p class="description text-center"> "Lamborghini Mercy <br>
                                                    Your chick she so thirsty <br>
                                                    I'm in that two seat Lambo"
                                </p>
                            </div>
                            <hr>
                            <div class="text-center">
                                <button href="#" class="btn btn-simple"><i class="fa fa-facebook-square"></i></button>
                                <button href="#" class="btn btn-simple"><i class="fa fa-twitter"></i></button>
                                <button href="#" class="btn btn-simple"><i class="fa fa-google-plus-square"></i></button>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>