Techniques to deal with forms and browser history
Techniques to deal with forms and browser history
Hello all!
I'm a beginner in web development. I'm building a simple small library application for learning purposes that has processes such as:
- The landing page is an main index page with links to people page, books page, etc.
- Suppose the user clicks "books", it will be redirected to a page with a list of all registered books, let's call it "books index".
- The user can edit one of the books or click the "new" link. Both choices will redirect they to "edit-book" page, with a simple form that can be submitted.
- After submission, the user is redirected to the "books index" to edit or add another book.
In summary:
[1: index] -> [2: books index] -> [3: edit book form] -> [4: books index]
In step 4, if the user clicks the "back button" in browser, it is redirected to the form page. If they edited 20 books, they will be redirected to the form page 20 times. It is rather confusing, so I want they to be redirected to the main index page if they are on the books index page.
It seems I cannot just remove things from browser history with Javascript.
Do you have any suggestion? I'm thinking about just adding a "back" button in the page which works differently from the browser button, but it would still add stuff in history, which could make things even more confusing.
Thank you very much.
You can try with location.replace or history.replaceState if you're not using some framework (i.e. Angular), otherwise they usually have their own way of dealing with this. You could always change the logic of your steps 3 and 4. Someone else could probably add a better answer than this. Sorry for formatting, I'm writing from the phone.
Thanks. It seems these functions are useful in a SPA context? Since I'm reloading every page (I'm using plain HTML for most of this application) these functions seem not to be really useful for the purpose I wrote. Maybe I'm doing something wrong?
Maybe you could preventDefault onclick on the anchor element that links to the form page? You could then use one of those replace functions in that onclick handler. It’ll still be valid HTML this way, functional without JS too
I would add a "Back to homepage" link that is shown after the form submission succeeds. If you're feeling ambitious, you can add a setTimeout for a short interval that redirects them as well. I think it is a bad user experience to break the back button (to make it so pressing the browser's back button doesn’t take you to the most recent page), so I would discourage you from tinkering with the browser's history stack.
Thanks for the reply. I was thinking about that, but in this specific case, changing back button behavior seem to improve user experience. See, for instance, Lemmy. IIRC, after submitting a new post, you are redirected to the post page you just submitted. If you press browser back button, you are taken to the community index page, not the submit form. How does Lemmy achieve this? Is it one single page, which content is changed by Javascript or, it is like my application, in which a full reload of the page is done?
BTW, I'm also written the backend. There are some examples on the web about solving this problem in the backend using cookies to keep track of the state. I'm give it a try.