Two submit buttons in Ajax.BeginForm. Need to call different js functions in OnSuccess

Question

I have an Ajax form on my MVC page, with two separate submit buttons...

@using (Ajax.BeginForm("Save", "Company", new AjaxOptions() {
    HttpMethod="Post", OnSuccess="closeForm" 
}, new {@id = "companyEditForm"})) {
    ....some edit fields......

    <input type="submit" value="Save & Next"/>
    <input type="submit" value="Save" />
}

I would like to call a different js function after the form is submitted with the "Save & Next" button. So if the user clicks the "Save" button, it should submit the form then call the "closeForm" javascript function. If the user clicks the "Save & Next" button, it should submit the form, then call the "nextForm" javascript function. Is there a simple way of achieving this?

Answer 1

Is there a simple way of achieving this?

No, but you could have the controller action pass the button that was clicked in the result. This could be done either as a Json property (if you are returning JSON) or it could also be a custom response HTTP header.

And then inside your success callback (which can only be one) you could retrieve this value in order to know which button was clicked and act accordingly.

So, start by giving a name to your submit button so that you know which one was clicked:

@using (Ajax.BeginForm("Save", "Company", new AjaxOptions() {
    HttpMethod="Post", OnSuccess="onSuccess" 
}, new { id = "companyEditForm" })) {
    ....some edit fields......

    <button type="submit" name="btn" value="save_next">Save &amp; Next</button>
    <button type="submit" name="btn" value="save">Save</button>
}

And then inside your controller action

[HttpPost]
public ActionResult Save(MyViewModel model)
{
    Response.AppendHeader("X-Button", Request["btn"]);

    ... your usual processing
}

and finally inside your onSucecss callback:

function onSuccess(data, status, xhr) {
    function onSuccess(data, status, xhr) {
        var btn = xhr.getResponseHeader('X-Button');
        if (btn == 'save_next') {
            // The "Save & Next" button was clicked
        } else if (btn == 'save') {
            // The "Save" button was clicked
        } else {
            // The user didn't submit the form by using the mouse and
            // clicking on a button, he simply pressed Enter while 
            // inside some text field or you have some other portion of
            // javascript which triggered the form submission without pressing
            // on any submit button
        }
    }
}

Answer 2

You could switch from Ajax.BeginForm() to Html.BeginForm() and then use JQuery to submit your form.

<script type="text/javascript">
$('#save').on('click', function () {
    var form = $('form');

    $.ajax({
        url: form.attr('action'),
        type: 'post',
        data: form.serialize(),
        success: function (result) {

            // call another function
        }
    });

    return false;
});

$('#saveAndEdit').on('click', function() {

    $.ajax({
        url: form.attr('action'),
        type: 'post',
        data: form.serialize(),
        success: function (result) {

            // call another function
        }
    });

    return false;
});
</script>