Remove default submit on modal form button

Question

I have a parent form that is using a modal form to update it. Once the user is finished with the modal form:

1. I want it to close the modal form
2. Trigger a post-back which will call a controller function to update a database table
3. Avoid redirecting using the default submit action (e.preventDefault())

My problem is that if I remove the default submit event, no post-back occurs and my database table stays unmodified. I am using AJAX to modified the text on the parent form to reflect the user updates.

How can I force a post back without leaving the parent form? I do not want to reload the webpage; only update values, close the modal form and trigger a post event to call an update function.

NOTE: If I omit the preventDefault() event, the webpage always redirects to the url: /client/UpdateClientDetails/' + id

Please see below for my code snippets:

AJAX snippet

<script type="text/javascript">
$('.btn-primary').click(function (e) {
    $.ajax({
        url: '/Client/UpdateClientDetails',
        type: 'POST',            
        dataType: 'json',
        data: newClient = {
            address1: $("#[email protected]").val(),
            address2: $("#[email protected]").val(),
            city: $("#[email protected]").val(),
            province: $("#[email protected]").val(),
            postalCode: $("#[email protected]").val(),
            phoneNumber: $("#[email protected]").val()
        },
        cache: false,
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            $("#[email protected]").text(newClient.address1);
            $("#[email protected]").text(newClient.address2);
            $("#[email protected]").text(newClient.city);
            $("#[email protected]").text(newClient.province);
            $("#[email protected]").text(newClient.postalCode);
            $("#[email protected]").text(newClient.phoneNumber);

            $("#dialog-actions").dialog('close');
        },
        error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
    });
});

Beginning of modal form

@using (Html.BeginForm("UpdateClientDetails", "Client", FormMethod.Post, attributes))
{
    //HTML Helpers & other things here
}

Controller method I want to invoke

[HttpPost]
public void UpdateClientDetails(Client newClientDetails)
{
    _clientService.UpdateClient(newClientDetails);
}

Answer 1

The <input type="submit">, when inside a form element, will submit the form when clicked unless you return false or event.preventDefault();

Omitting preventDefault() will always submit the form because your input is a "SUBMIT". e.preventDefault() it's just like returning false, nothing is really invoked in the server.

Use button instead of submit

Since you are already using AJAX you could do something like this.

Update your controller method to return JsonResult.

    [HttpPost]
public JsonResult UpdateClientDetails(Client newClientDetails)
{
    _clientService.UpdateClient(newClientDetails);
    return Json("Success", JsonRequestBehavior.DenyGet);
}

Javascript.

$(".btn-primary").click(function () {
    $.ajax({
                url: 'URL to your json method',
                type: 'POST',
                dataType: 'json',
                data: 'Build your JSON object and set it here',
                cache: false,
                contentType: 'application/json; charset=utf-8',
                success: function (data) {

                    var returnValue;
                    try {
                        returnValue = data;

                        //Do your logic. 
                        $("#dialog-actions").dialog('close');

                    } catch (e) {
                        // error

                        return;
                    }


                },
                error: function () { alert("Something went wrong! Please contact the system admin.") }
            })
});