Ajax request in ASP.NET core razor pages - doing nothing

See more:

Javascript

Visual-Studio

Ajax

, +

My goal is to dynamically update two fields every time there's a change made to a dropdown list. In my example, the dropdown is a list of employees, and I need the group/subgroup fields to update every time it changes.

Using this article and others, I'm attempting to call the C# method I've created which runs 2 linq queries and sets the result to the fields. I've verified that this method works just fine. This is located in "Edit.cshtml.cs":

// Displays chosen employee's group and subgroup
public ActionResult OnPostSearchCurrGroup()
{
    var subgroupQuery = (from c in _context.ppcc_matrix
                         from e in _context.employees
                         from s in _context.subGroups
                         where c.employeesID == e.Id
                         where e.subGroupsID == s.Id
                         select s.subgrp_nm).FirstOrDefault();
    subGroups.subgrp_nm = subgroupQuery;

    var groupQuery = (from c in _context.ppcc_matrix
                      from e in _context.employees
                      from s in _context.subGroups
                      from g in _context.groups
                      where c.employeesID == e.Id
                      where e.subGroupsID == s.Id
                      where s.groupsID == g.Id
                      select g.grp_nm).FirstOrDefault();
    groups.grp_nm = groupQuery;

    return Page();
}

In my "Edit.cshtml" file, I have my 3 fields:

<div class="form-group">
    <label asp-for="ppcc_matrix.employeesID" class="control-label"></label>
    <select asp-for="ppcc_matrix.employeesID" class="form-control" id="employee" asp-items="ViewBag.employeesID">
        <option disabled selected value="0" style="display:none">--select--</option>
    </select>
</div>
<div class="form-group">
    <label asp-for="groups.grp_nm" id="grptxt">Group</label>
    <input asp-for="groups.grp_nm" id="grpnm" class="form-control" disabled />
</div>
<div class="form-group">
    <label asp-for="subGroups.subgrp_nm" id="subgrptxt">SubGroup</label>
    <input asp-for="subGroups.subgrp_nm" id="subgrpnm" class="form-control" disabled />
</div>

and then my javascript:

<script language="javascript" type="text/javascript">
    var employee = document.getElementById('employee');
    employee.addEventListener('change', UpdateGroup);
    function UpdateGroup() {
        $.ajax({
            type: 'post',
            url: '/edit?handler=searchcurrgroup',
            contenttype: "application/json; charset=utf-8",
            datatype: 'json'
        })
    }
</script>

Problem: It does nothing when I change the employee field. My handler is named correctly, it's an onpost method..
It works if I set it as the asp-page-handler on a button, but of course it would make more sense to use an ajax call to do display it automatically.

What I have tried:

Multiple articles such as this one and the code above.