How to redirect the user to a specific page if he click in the browser back button?

Published 5 months ago by adamjhn

I have a page with the details of a congress. n this page there is a form where user can select the quantities of efach ticket type of the congress that he wants and then clicks "Next".

Then he goes to the registration page that as a multi step form with two steps, the first is for the user to enter some registration info (name, surname, email, etc) the second is just a confirmation step, if there are no validation errors in the first step in the second step it appears a message saying that the user was registered with success in the congress. Between the two steps the url is always te same "http://congress.test/congress/10/congress-test/registration".

When the user is in the step 2 with the success message there is a url "Go back to congress details page":


                                                <a href="{{route('congresses.show', ['id' => $id, 'slug' => $slug])}}"><i class="fa fa-arrow-left"></i> Go back to congress details page</a>

And its working fine.

But do you know how to redirect the user to this congress details page if he click in the browser back button? Because when the use is in the step2 and click in the browser backbutton he goes to the step1 of the multi step form but he should go to the congress details page.

Cronix
Cronix
5 months ago (783,470 XP)

There's not a good solution for this. You can't change the actual back buttons behavior, but you can manipulate the browsers history ( https://developer.mozilla.org/en-US/docs/Web/API/History_API ). The back button isn't part of the dom or html, it's in the browser so you can't get access to it, but if you remove a page from the browsers history, the net effect is the same thing.

Another (probably better) way around this it to use modals and ajax for your forms, so the user doesn't actually leave the page. All steps could be performed in a single modal. You could add your own back button (back to step 1) to the modal that just hides Step 2 and shows Step 1. It would be more coding, but would be faster (no full page reloads for each step) and a better user experience and solve your dilemma.

adamjhn

Thanks it seems a good approach, also do you know if using sessions could also be a good solution? For example in the RegistrationController when the registration is completed with success store something in the session to save in the session the information that the registration was completed.

And based on this information if the user acesses the registration page, if that session exist, redirect the user to the congress details page . The issue might be that the user actually could want make another registration, and in that case the stored session will not allow him to do the registration. But maybe setting a duration or something to the session it also works no?

jlrdw
jlrdw
5 months ago (251,870 XP)

@Cronix

Another (probably better) way around this it to use modals and ajax for your forms

Good answer, I am getting ready (popcorn) for another 4 or 5 page discussion on the how do I do that with ajax.

@adamjhn just kidding with @Cronix here. By all means post what you tried, and if doesn't work of course there is help.

jlrdw
jlrdw
5 months ago (251,870 XP)

@adamjhn if you go with any ajax, watch out for cached pages, they can mess things up sometimes.

adamjhn

Thanks, I dont know, maybe with sessions should also work fine, I just dont which sould be the best flow for the sessions approach. So Im in doubt about use ajax or sessions.

Please sign in or create an account to participate in this conversation.