JavaScript not Sending Parameter to Controller MVC

I have the following view

@using System.Linq;
@model MyCompanyNET.Models.ViewModels.AdministratorViewModel

<style type="text/css">
    span {
        padding-right: 10px;
    }
    ...
</style>

<div class="manage">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active">
            <a data-toggle="tab" href="#invite">
                <span class="glyphicon glyphicon-inbox"></span>Invite
            </a>
        </li>
        ...
    </ul>
    <div class="tab-content">
        <div id="invite" class="tab-pane active fade in">
            @Html.Partial("_InvitePartial", Model)
        </div>
        ...
    </div>
</div>
@section scripts {
    <script>
        $(function () {
            $("input[type=button]").click(function () {
                var data_email = $('#email').val();
                var data_product = $('#product option:selected').text();
                $.ajax({
                    url: '@Url.Action("SendInvite")',
                    type: 'POST',
                    data: { email: data_email, product: data_product },
                    success: function (result) {
                        $('#fail_message').html(result.result_failure);
                        $('#success_message').html(result.result_success);
                    }
                });
            });
        });
    </script>
}

The partial view is

@using (Html.BeginForm("SendInvite", "Tools", FormMethod.Post,
    new
    {
        @class = "form-horizontal",
        enctype = "multipart/form-data",
        role = "form"
    }))
{
    @Html.AntiForgeryToken()
    <h2>Invite Users</h2>
    <div class="form-group">
        @Html.LabelFor(m => m.EmailAddress, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.EmailAddress, new { @class = "form-control", id = "email" })
            @Html.ValidationMessageFor(m => m.EmailAddress)
        </div>
    </div>
    <div class="form-group">
        @Html.Label("Access To", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.DropDownList("Product", new SelectList(
                new List<Object> {
                    new { Text = "Product1", Value = "Product1" },
                    new { Text = "Product2", Value = "Product2" },
                    new { Text = "All", Value = "All" }},
                    "Value",
                    "Text"),
                    new { @class = "form-control", id = "product" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <span id="fail_message" class="label label-danger"></span>
            <span id="success_message" class="label label-success"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="button" value="Invite User" class="btn btn-primary" />
        </div>
    </div>
}

and my controller is

[AllowAnonymous]
public async Task<JsonResult> SendInvite(string email, string product)
{
    ApplicationUser user = null;
    string result = String.Empty;
    if (ModelState.IsValid)
    {
        if (String.IsNullOrEmpty(email))
        {
            return Json(new
            {
                result_success = String.Empty,
                result_failure = "Please enter and email address"
            }, JsonRequestBehavior.AllowGet);
        }
    }

    ... // Do stuff with email and product.
}

Now when this partial view code was in the view itself, everything worked fine. I'd get both the entered email address and the selected product coming through to my controller method SendInvite, but now the button does not even fire.

Now, I have changed the

<input type="button" value="Invite User" class="btn btn-primary"/>

to use submit

<input type="submit" value="Invite User" class="btn btn-primary"/>

This now calls my controller method but without the email parameter, which is always null(?). To make things worse, the return Json(new ... also does not render my <span id="success_message" class="label label-success"></span>s and it used to when everything was in the main view. Why is this occurring and how an I fix it?

Thank for your time.