CODEWITHSUNDEEP
javascriptjqueryajaxhttp-redirect
Amit
Amit

Reputation: 7838

Page redirect with successful Ajax request

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

Upvotes: 49

Views: 294906

Answers (9)

Aram Mutlu
Aram Mutlu

Reputation: 57

Another option is:

window.location.replace("your_url")

Upvotes: 0

morels
morels

Reputation: 2115

$.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"

        }
    });

Upvotes: 3

Nitin Hurkadli
Nitin Hurkadli

Reputation: 21

I posted the exact situation on a different thread. Re-post.

Excuse me, This is not an answer to the question posted above.

But brings an interesting topic --- WHEN to use AJAX and when NOT to use AJAX. In this case it's good not to use AJAX.

Let's take a simple example of login and password. If the login and/or password does not match it WOULD be nice to use AJAX to report back a simple message saying "Login Incorrect". But if the login and password IS correct, why would I have to callback an AJAX function to redirect to the user page?

In a case like, this I think it would be just nice to use a simple Form SUBMIT. And if the login fails, redirect to Relogin.php which looks same as the Login.php with a GET message in the url like Relogin.php?error=InvalidLogin... something like that...

Just my 2 cents. :)

Upvotes: 2

TJ L
TJ L

Reputation: 24472

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'
        }

    }
});

Upvotes: 21

Jeremy Boyd
Jeremy Boyd

Reputation: 5403

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.

Upvotes: 2

Adam
Adam

Reputation: 44959

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.

Upvotes: 47

simnom
simnom

Reputation: 2620

I suppose you could attack this in two ways;

1) insert window.location = 'http://www.yourdomain.com into the success function.

2) Use a further ajax call an inject this into an element on your page, further info on which you can find in the jQuery docs at http://api.jquery.com/jQuery.get/

Upvotes: 0

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

I think you can do that with: 

window.location = "your_url";

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630597

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);

Upvotes: 15

Related Questions