How to redirect previous page using javascript

Viewed 1206

How to redirect previous page after redirect to previous page. After form submission i am redirect form to thank you page but after sometimes i want redirect previous page.

Below is the code i am using

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    //location = 'abc.com1/thank-you/';
     if ( '17615' == event.detail.contactFormId ) { 
     } 
    else if( '19110' == event.detail.contactFormId ){
        location = 'abc.com1/thank-you-broucher/';
    }
    else {
         location = 'abc.com1/thank-you/';
     }
}, false );
</script>

after location redirect i want again redirect to my first original page.

Anyone have idea then let me know

3 Answers

You can do it several ways:

// Javascript directly in the href    
<a href="javascript: history.go(-1)">Go Back</a>

another way would be:

// onclick Method
<a href="#" onClick="history.go(-1); return false;">Go back</a>

Or as mentioned above my post

// windows method
javascript:window.history.back();

and for last you can create a function

<script>
function goBack() {
    history.go(-1);
}
</script>
<button onclick="goBack()">Go Back</button>

If you want to have it done automatically you just need to use it in a function and add a setTimeout:

function goBackTimed() {  
  setTimeout(() => {
    window.history.go(-1);
  }, 3000);
}

Since your using WordPress, I would recommend doing this using the functions.php file and add a filter with a function for the redirect, but since you requested how to do this with javascript, you need to inspect your thank you page to grab the page-id-[ID-NUMBER] class it generates on the body tag your script above would need a condition to detect if the class is present on the body assuming this script is loaded on your entire site:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    //location = 'abc.com1/thank-you/';
     if ( '17615' == event.detail.contactFormId ) { 
     } 
    else if( '19110' == event.detail.contactFormId ){
        location = 'abc.com1/thank-you-broucher/';
    }
    else {
         location = 'abc.com1/thank-you/';
     }
}, false );

if (document.body.classList.contains('page-id-12345')) {

   function goBack() {
        history.go(-1);
    }
    window.setInterval(goBack, 3000);
}
</script>

I prefer history.go(); since you can go back even more than 1 page back for example history.go(-2); would go back 2 pages instead of one, this sometimes can be handy in certain cases.

One of the problem with using js built in history.go(-1); is that the behaviour is based on your browser and not on your website structure.

If someone decide to access a website straight from a url or a bookmark, upon using history.go(-1); on landing, he would be redirected outside the website environment.


As you're using Wordpress

We can easily build a go back url function based on the current user url.

Anything that can be offloaded to server should be. Instead of using js here is a php alternative. The main advantage here is quartering the user to your website. Here is our get_backward_url() function.

add_action( 'init', 'get_backward_url' );
function get_backward_url() {

    $scheme = $_SERVER['REQUEST_SCHEME'];
    $request = $_SERVER['REQUEST_URI'];
    $host = $_SERVER['HTTP_HOST'];

    if ( str_contains( $request, '?' ) ) { //... case handling, urls with variables
        $cleaner = substr( $request, 0, strpos( $request, '?' ) );
        $request = $cleaner;
    };
        
    if ( str_ends_with( $request, '/' ) ) //... case handling, urls with/without end-slash
        $worker = explode( '/', substr( $request, 1, -1 ) );
    else
        $worker = explode( '/', substr( $request, 1 ) );
        
    array_pop( $worker );
    
    if ( str_contains( $host, 'localhost' ) ) //... case handling, urls on local hosting
        $href = esc_url( $scheme . '://' . $host . '/' . implode( '/', $worker ) . '/' );
    else
        $href = esc_url( $scheme . '://' . $host . implode( '/', $worker ) . '/' );

    if ( ! is_home() && ! is_front_page() ) //... case handling, home or front page
        return $href;

};

Then, anytime we need to use it in our template we can simply output it on the front end...

<a href="<?= get_backward_url(); ?>">← go back</a>

Happy coding!

Related