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 = 'abc1/thank-you/';
if ( '17615' == event.detail.contactFormId ) {
}
else if( '19110' == event.detail.contactFormId ){
location = 'abc1/thank-you-broucher/';
}
else {
location = 'abc1/thank-you/';
}
}, false );
</script>
after location redirect i want again redirect to my first original page.
Anyone have idea then let me know
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.1/thank-you/';
if ( '17615' == event.detail.contactFormId ) {
}
else if( '19110' == event.detail.contactFormId ){
location = 'abc.1/thank-you-broucher/';
}
else {
location = 'abc.1/thank-you/';
}
}, false );
</script>
after location redirect i want again redirect to my first original page.
Anyone have idea then let me know
Share Improve this question asked Mar 16, 2021 at 15:52 PraffPraff 1292 gold badges5 silver badges9 bronze badges 3- ``` switch (event.detail.contactFormId ) { case '17615' : break; case '19110': { location = 'abc.1/thank-you-broucher/'; break; } default:{ location = 'abc.1/thank-you/'; break; } ``` – Dalorzo Commented Mar 16, 2021 at 15:56
- window.location.history(-1) is how you go back – Dalorzo Commented Mar 16, 2021 at 15:57
- Manually redirecting the user to a page they've already been to is a code smell. It can lead to issues with caching, especially if forms are involved. I'd suggest you change the UI flow so that the user cannot progress until all business logic requirements have been met - assuming this is required for validation reasons. – Rory McCrossan Commented Mar 16, 2021 at 16:37
3 Answers
Reset to default 2use history.back
window.history.back();
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 remend 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.1/thank-you/';
if ( '17615' == event.detail.contactFormId ) {
}
else if( '19110' == event.detail.contactFormId ){
location = 'abc.1/thank-you-broucher/';
}
else {
location = 'abc.1/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!