How to call an event handler when the value in a text box in an ASP.NET razor pages app is changed?

See more:

ASP.NET-Core

I'm building a web application using ASP.NET CORE 3.1. There is a data table(FamCode) that has two columns, FamilyCode (key field) and FamilyName. On the page that lets a user add a new person there are a number of fields. Among them is FamilyCode and FamilyName. When the FamilyCode is entered and the user exits the field, I want to trigger an event that queries the FamCode table using the the value in the FamilyCode field to select the FamilyName, then populate the the FamilyName field with the value.

If I add a button to the page, I can run the event handler. I need the event handler to run automatically when the value in the FamilyCode field is changed.

When I run the code the handler is never called. My code is attached, hopefully some can tell me what I'm doing wrong. Any suggestions or ideas on how to do this are appreciated.

What I have tried:

<form method="get" >
    <div class="border backgroundWhite">
        <div class="form-group row">
            <div class="col-2">
                <label asp-for="PublisherFamilyVM.PubDataList.LastName"></label>
            </div>
            <div class="col-6">
                <input asp-for="PublisherFamilyVM.PubDataList.LastName" class="form-control" />
            </div>
            <span asp-validation-for="PublisherFamilyVM.PubDataList.LastName" class="text-danger"></span>
        </div>
        <div class="form-group row">
            <div class="col-2">
                <label asp-for="PublisherFamilyVM.PubDataList.FirstName"></label>
            </div>
            <div class="col-6">
                <input asp-for="PublisherFamilyVM.PubDataList.FirstName" class="form-control" />
            </div>
            <span asp-validation-for="PublisherFamilyVM.PubDataList.FirstName" class="text-danger"></span>
        </div>

        <div class="form-group row">
            <div class="col-2">
                @Html.LabelFor(m => m.PublisherFamilyVM, "Family Code/Name:")
            </div>
            <div class="col-2">
                <input id="input_family_code" class="form-control" type="text" 
                 value="" onblur="getfamilyname();" />
            </div>

            <div class="col-4">
                <input id="input_family_name" class="form-control" type="text" 
                  value="" />
            </div>
            <span asp-validation-for="PublisherFamilyVM.PubDataList.FamilyCode" 
             class="text-danger"></span>
        </div>


        <div class="form-group row">
            <div class="col-6 offset-2">
                <partial name="_CreateAndBackToListButton" />
            </div>
        </div>
    </div>
</form>


@section Scripts{
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }

<script>
    function getfamilyname() {
        var familycode = $("#input_family_code").val();

        if (familycode != "") {
            $.getJSON(`/eventinfo?handler=FamilyNameByCode&familycode=${familycode}`, 
              function (data) {
                $("#input_family_name").empty();
                $("#input_family_name").val(data);
            });
        }
</script>

}

    //***** PageModel *****
    
            public JsonResult OnGetFamilyNameByCode(string familycode)
    
            {
                //code logic here
                //retrieve data from database based on famiycode
                return new JsonResult(familycode);
            }