Page redirect with successful Ajax request

Question

I have a form that uses Ajax for client-side verification. The end of the form is the following:

$.ajax({
        url: 'mail3.php',
        type: 'POST',
        data: 'contactName=' + name + '&contactEmail=' + email + '&spam=' + spam,

        success: function(result) {
            //console.log(result);
            $('#results,#errors').remove();
            $('#contactWrapper').append('<p id="results">' + result + '</p>');
            $('#loading').fadeOut(500, function() {
                $(this).remove();

            });

        }
    });

EDIT: this is my mail3.php file dealing with errors:

$errors=null; 

if ( ($name == "Name") ) {
    $errors = $nameError; // no name entered
}
if ( ($email == "E-mail address") ) {
    $errors .= $emailError; // no email address entered
}
if ( !(preg_match($match,$email)) ) {
    $errors .= $invalidEmailError; // checks validity of email
}
if ( $spam != "10" ) {
    $errors .= $spamError; // spam error
}

if ( !($errors) ) {
    mail ($to, $subject, $message, $headers);
    //header ("Location: thankyou.html");
    echo "Your message was successfully sent!";
    //instead of echoing this message, I want a page redirect to thankyou.html

} else {
    echo "<p id='errors'>";
    echo $errors;
    echo "</p>";
}

I was wondering if it's possible to redirect the user to a Thank You page if the ajax request is successful and no errors are present. Is this possible?

Thanks! Amit

Solution 1

Sure. Just put something at the the end of your success function like:

if(result === "no_errors") location.href = "http://www.example.com/ThankYou.html"

where your server returns the response no_errors when there are no errors present.

Solution 2

Just do some error checking, and if everything passes then set window.location to redirect the user to a different page.

$.ajax({
    url: 'mail3.php',
    type: 'POST',
    data: 'contactName=' + name + '&contactEmail=' + email + '&spam=' + spam,

    success: function(result) {
        //console.log(result);
        $('#results,#errors').remove();
        $('#contactWrapper').append('<p id="results">' + result + '</p>');
        $('#loading').fadeOut(500, function() {
            $(this).remove();

        });

        if ( /*no errors*/ ) {
            window.location='thank-you.html'
        }

    }
});

Solution 3

You can just redirect in your success handler, like this:

window.location.href = "thankyou.php";

Or since you're displaying results, wait a few seconds, for example this would wait 2 seconds:

setTimeout(function() {
  window.location.href = "thankyou.php";
}, 2000);

Solution 4

$.ajax({
        url: 'mail3.php',
        type: 'POST',
        data: 'contactName=' + name + '&contactEmail=' + email + '&spam=' + spam,

        success: function(result) {

            //console.log(result);
            $('#results,#errors').remove();
            $('#contactWrapper').append('<p id="results">' + result + '</p>');
            $('#loading').fadeOut(500, function() {
                $(this).remove();

            });

            if(result === "no_errors") location.href = "http://www.example.com/ThankYou.html"

        }
    });

Solution 5

In your mail3.php file you should trap errors in a try {} catch {}

try {
    /*code here for email*/
} catch (Exception $e) {
    header('HTTP/1.1 500 Internal Server Error');
}

Then in your success call you wont have to worry about your errors, because it will never return as a success.

and you can use: window.location.href = "thankyou.php"; inside your success function like Nick stated.

View more solutions

Comments

[Andrea Zilio]

duplcate of stackoverflow.com/questions/3430877/…

[Amit]

@Andrea: It's not a duplicate because I'm trying to redirect the page only if no errors are present. If errors are present, I want it to write those errors.

[ToolmakerSteve]

Does this answer your question? How do I redirect a page in jQuery?

[ToolmakerSteve]

I say it is a duplicate. The essence of question is how to redirect, and one can see in the linked Q&A, code that you can use here, after testing whatever you need to test to determine there are no errors. In fact, every answer here is just like the answers there, after the obvious "if" check.

[Jeremy Boyd]

Proper usage of HTTP Status Codes will make every success a success without the server having to pass back any messages.

[Amit]

How can I check for no errors condition if all of the errors are processed through the mail3.php file?

[Jeremy Boyd]

you should trap errors in your mail3.php file, and return a status code of 500 on your response.

[Adam]

@Jeremy- True, unless you wanted to pass back specific error messages for the site to deal with or even different URLs to redirect to on failure. Those messages would have to be returned with a 200 response code necessitating a no_errors response to differentiate.

[Amit]

Could you elaborate a little? How exactly do I return this status code of 500?

[Amit]

Actually from first look it would seem to me that this method would work!

[Amit]

Could you take a look at my edit to see how I can deal with the no error scenario? I only want it to be redirect to thankyou.php if no errors are present.

[Amit]

Is it possible to GET the $error variable returned from the mail3.php file (see EDIT) and check for its content. if !($error), then redirect page?

[Amit]

Is it possible to GET the $error variable returned from the mail3.php file (see EDIT) and check for its content. if !($error), then redirect page

[Adam]

@Amit I would do something like if(result === "Your message was successfully sent!")//redirect else $('#id ofEmptyDivOnPage').html(response) that'll display the errors on the page if there are errors and redirect if not assuming you have a div with that id

[Amit]

@Adam: Love it, thank you. I'll try it now and see if it works!

[Amit]

@Adam: Should the redirect using window.location work on a locally hosted server (using xampp)? Cuz it's not working

[Nick Craver]

@Amit - You could put if(result === "Your message was successfully sent!") before this, that would only send in those cases.

[Jeremy Boyd]

@Adam - Not necessarily. The error function in jQuery's Ajax object will still have access to the response text of the response.