ajax通信時に「Uncaught TypeError: Cannot read property 'toLowerCase' of undefined'」というエラーが発生し通信に失敗する

■解決したいこと
ajax通信時に「Uncaught TypeError: Cannot read property 'toLowerCase' of undefined'」というエラーが発生し通信に失敗する

■行った手順
・(html)フォームの作成
・(js)送信ボタンに対してclickイベントを設置。イベント内でフォームの値をパラメータとして格納しajax通信のparamで設定している

(test.html)

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
	<!-- jquery UI -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
	
	<!-- bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
  </head>
  <body>

  	<h3 class="bg-info text-white">新規登録ページ</h3>
	
	<div>
		<form>
			<div class="form-group col-9">
				<label>社名</label>
				<select class="form-control" id="corporateNm">
					<option>A社</option>
					<option>B社</option>
					<option>C社</option>
				</select>
			</div>

			<div class="form-group col-9">
				<label>費用</label>
				<input type="text" class="form-control" id="cost" th:placeholder="費用を入力してください">
			</div>
		</form>
	</div>
	
	<div class="modal-footer fixed-bottom">
		
		<button class="btn btn-info ml-3" id="registerBtn">登録</button>
		<button type="button"
			class="btn btn-secondary closeDialog text-nowrap" id="buttonClose"
			data-dismiss="modal" data-target="rgsDialog">閉じる</button>
	</div>
	
	<!-- jquery,jquery UI -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    
    <!-- bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
	
	<!-- 画面固有のjs -->
	<script type="text/javascript" th:src="@{/js/test/register.js}"></script>
	
	<!-- 画面共通のjs -->
	<script type="text/javascript" th:src="@{/js/common/com.js}"></script>
	<script type="text/javascript" th:src="@{/js/common/testDialog.js}"></script>
  </body>
</html>

(register.js)

$(function(){
	
	// ****************************************************************************************************************
	// 変数宣言
	// ****************************************************************************************************************

	const $corporateNm = $("#corporateNm");

	const $cost = $("#cost");

	const $registerBtn = $("#registerBtn");
	
		
	// ****************************************************************************************************************
	// イベント処理
	// ****************************************************************************************************************
       $registerBtn.on("click", function(){
		// formの入力値をパラメータとしてセット
		let param = {
			  
			corporateNm : $corporateNm.val(),
			cost     	: $cost.val()
		}
		
		$.ajax({
			type: 'post',
			url : 'http://localhost:8080/test/register',
			data: param
			
		}).done(function(data) {
			
			if(data.result == 'SUCCESS') {
				com.dialog.info("登録に成功しました。");
			} else {
				com.dialog.info("登録に失敗しました。");
			}
			
		});
		
		return false;
		
	});
})

(TestRegisterRestController.java)

package com.example.demo.web.test.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.BindingResult;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.web.common.CommonResultDataset;
import com.example.demo.web.test.form.TestRegisterForm;
import com.example.demo.web.test.service.TestRegisterService;

@RequestMapping(value = "/test")
@RestController
public class TestRegisterRestController {
	
	@Autowired
	private TestRegisterService service;

	
	@RequestMapping(value = "/register")
	public CommonResultDataset register(@Validated @ModelAttribute TestRegisterForm form,
			BindingResult result){

		CommonResultDataset dataset = new CommonResultDataset();


		// バリデーションチェックの結果で分岐
		if (result.hasErrors()) {

			// エラー発生時。エラーメッセージをdatasetに格納
			result.getAllErrors().stream().forEach(error -> {dataset.addMessage(error.getDefaultMessage());});
		}

		return service.register(form);

	}
}

※cssファイルはなし

■試したこと
1 ajax通信の記述にミスあり？
→jqueryの日本語リファレンスを確認。記述にミスは見当たらず
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

2 「Uncaught TypeError: Cannot read property 'toLowerCase' of undefined'」とは何かを調べ原因を探る
→「Cannot read property 'toLowerCase' of undefined'」←こちらはtoLowerCaseメソッド呼び出し時に起こるエラーで、
メソッドの対象要素のプロパティが見当たらない場合に発生するとのこと。
開発ツールで今回のajax通信で使用している以下2つの値を確認するが未定義のものは見当たらなかった。
・$registerBtn
・param