Do not reload page when giving Submit in modal

Question

I have a modal to research customers:

Which is called a registration form as follows:

$('#linkSearchShipperCustomer').on("click", function (e) {
            showDialogList("@Url.Action("IndexShadow", "ShipperCustomer")", "IdShipperCustomerDiv", "IdShipperCustomer", "ShipperCustomerFullName", "Buscar Cliente", function (value, text) {
                loadCustomerAddress(value);
            });

        });

the showDialog has that body:

function showDialogList(url, idDiv, idValueUpdate, idTextUpdate, dialogTitle, callback) {
debugger;
elementChoosedCallback = callback;

idElementValueUpdate = idValueUpdate;
idElementTextUpdate = idTextUpdate;

$.post(url, {}, function (result) {
    $("#" + idDiv).html(result);
    if (dialogTitle != undefined)
        $("#" + idDiv).dialog({ width: 670, title: dialogTitle });
    else
        $("#" + idDiv).dialog({ width: 670 });

  });
}

and calls this action:

public ActionResult IndexShadow(ShipperCustomerFilter filter)
    {
        filter.IsActive = true;
        filter.PageSize = 12;

        var modelList = new ShipperCustomerListViewModel()
        {
            ShipperCustomers = ShipperCustomerViewModel.ConvertFromModelList(repository.GetAllShipperCustomers(filter, out totalRecords)),
            LegalTypes = GetAllLegalTypes()
        };

        CreateRouteValuesForFilters();

        ViewBag.PagingModel = SetCurrentPage(totalRecords, filter.Page, filter.PageSize, true);
        ViewBag.PagingModel.FormId = "ShipperCustomerFormSearchId";

        return View(modelList);
    }

What I think is the problem is, when I give Submit in modal it reloads the back page and returns like this, reloaded the father with the fields of modal:

how to do not reload the page that called the modal, and display the results in the modal itself? (it is not in the image but it returns the results on this wrong page).

EDIT: After @Harrison’s tip, I saw that my code does not enter the function calling the e.preventDefault();I don’t know why.

$("#ShipperCustomerFormSearchId").on("submit", function (e) {
        debugger;
        e.preventDefault();

        $.post($(this).attr("action"), $(this).serialize(), function (result) {
            $("#IdShipperCustomerDiv").html(result);
        });
    });`

my beginForm:

@using (Html.BeginForm("IndexShadow", "ShipperCustomer", ViewBag.Routes as RouteValueDictionary, FormMethod.Get, new { @id = "ShipperCustomerFormSearchId", @class = "middle-forms" }))

Answer 1

To cancel a form Ubmit you have to use the preventDefault in the event, for example:

$('form').on('submit', function(e) {
    e.preventDefault();
    // insira aqui sua chamada ajax
})