Redirect after form submit success

Question

I've been having trouble with this and looked through a lot of past answers to this question.

Basically I would like to redirect a user to a different page after a successful submit of the form they are completing, and preferably after seeing a success message.

Here's where I think I have to add the redirect, but everything i've tried either breaks the submit and nothing hits my database, or nothing happens.

if (jQueryRoi('#formRoiWebCapture').valid()) {
   SaveCaptureForm(ui);
} else {
    document.getElementById('buttonSaveFormROI').disabled=false;
    }

Thank you so much for any help!

score 0 · Answer 1 · edited May 23 '17 at 11:56

To redirect to another page (from here):

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

When you say that nothing hits your database is because you are probably redirecting the page before completing the submit event. Use ajax to perform the submit and then redirect.

Since you are using jQuery, you can use something like this (taken from here):

$.post('server.php', $('#theform').serialize())

or

$.get('server.php?' + $('#theForm').serialize())

score 0 · Answer 2 · answered Jan 28 '14 at 21:30

It really depends on what your server side code does but you can do something like this (not the best implementation but is a starting point):

if (jQueryRoi('#formRoiWebCapture').valid()) {
    SaveCaptureForm(ui);
    showMessage();
    setTimeout(function() {
        location.href = "otherpage.html"
    },5000) // redirect after 5000ms
} else {
    document.getElementById('buttonSaveFormROI').disabled=false;
}

Redirect after form submit success

2 Answers2