Ajax sending null values to Controller even though I can see the value isn't null in Ajax

So my issue is that this whole thing works and my debug statement is firing in my home controller from the Ajax call, but the role parameter in changeRole(string role) is null every time. Can anyone help me figure out why?

Jquery/Ajax (changeRole.js)

$(function () {
    console.log("loaded");
})

function submit_changeRole(e, role) {
    e.preventDefault();
    $.ajax({
        url: "/Home/changeRole",
        method: "Post",
        data: {"role": role },
        contentType: "application/json",
        dataType: "json"
    }).done(function (result) {
        console.log("action taken: " + result);
        alert($("#b").text());
    }).fail(function (jqXHR, textStatus, errorThrown) {
        console.log("failed: ");
        console.log(jqXHR);
        console.log(textStatus);
        console.log(errorThrown);
    }).always(function () {
        console.log("but I will always do this");
    });
    return "{Success:true}"
}

Code in the View (index.cshtml)

<form><button id="LAButton" onclick="submit_changeRole(event, 'LA');" formmethod="Post">LA</button></form>

@section Scripts {
        <script src="~/js/changeRole.js"></script>
}

Code in the controller (HomeController.cs)

[HttpPost]
public JsonResult changeRole(string role)
{
    Debug.WriteLine("User wants to be role: " + role);
    return Json(
        new
        {
            success = true,
        });
}