Client Side Redirect on Form Submission

Question

I have a cshtml page that makes a call to a controller method and passes data to that method via a jquery call on form submission as follows:

$('form').submit(function () {

    //create instance for datePicker.
    // only after control creation we can get dateObj otherwise it throws exception.
    var dateObj = $("#datepick").ejDatePicker('instance');
    var obj = dateObj.option('value')

        //$.datepicker.formatDate('dd/MM/yyyy', new Date());
    var d = new Date(2011, 10, 30);
    alert(obj);
    alert(d);

    $.ajax({
        url: '/AutoComplete/AutocompleteFeaturesNew',
        data: {
            RequestedUntilDate: obj.toISOString(),
            RoomNo: '13a'
        },
        type: 'POST',
        success: function (data) {
            alert("key is suucessfully got in controller through form submit, Key:" + data);
        }
    });
});

The controller method itself is as follows:

[HttpPost]
public JsonResult AutocompleteFeaturesNew (RequestCreateViewModel createRequestViewModel)
{
    return Json(createRequestViewModel.RequestedUntilDate);
}

What I want to be able to do is, once the form has been submitted is to re-direct the control either to a) another page b) another controller method on successful submission of the form.

So, something like:

return RedirectToAction("Index");

But on the client side.

Any suggestions?

If you are not doing anything on return of data in success callback, neither you have error callback, then why do you need an AJAX operation? you can simply post form normally and return RedirectToAction(..) instead of JSON — K D, Jan 18 '17 at 13:46

score 0 · Answer 1 · answered Jan 18 '17 at 12:22

0

You can do it only from javascript, by adding the following line to the ajax success function body:

window.location.replace("http://...");

answered Jan 18 '17 at 12:22

Andrei Filimon

1,138
8
12

score 0 · Answer 2 · answered Jan 18 '17 at 13:43

Thanks for all your replies.

What I needed to do was to ensure that the $('form').submit(function () {returns false.

So:

//bind below onClick action to button $('form').submit(function () {

        //create instance for datePicker.
        // only after control creation we can get dateObj otherwise it throws exception.
        var dateObj = $("#datepick").ejDatePicker('instance');
        var obj = dateObj.option('value')

        //$.datepicker.formatDate('dd/MM/yyyy', new Date());
        var d = new Date(2011, 10, 30);
        alert(obj);
        alert(d);

        $.ajax({
            url: '/AutoComplete/AutocompleteFeaturesNew',
            data: {
                RequestedUntilDate: obj.toISOString(),
                RoomNo: '13a'
            },
            type: 'POST',
            dataType: 'json',
            success: function () {
                window.location.replace("http://stackoverflow.com/questions/41719249/client-side-redirect-on-form-submission?noredirect=1#comment70633597_41719249");
                }
        });
        return false;
    });

Thanks again,

Sean

Client Side Redirect on Form Submission

2 Answers2