[resolved] How would you implement showing a success message after posting a form?
I have this use case:
1. User navigate to
/books/create which displays a form to create a book
2. User fills the from and submits the form
3. In case of a successful submit, the user gets redirected to /books/:id and a success message is shown at the top.
Now, I'm not sure how to show the success message and make sure it's only shown once. E.g. it shouldn't appear again when page is refreshed.
I'm thinking about using sessionStorage or just simply redirect to /books/:id?success=true and then somehow omit the success query param.
What do you think? Are there existing solutions that solve this problem?2 Replies
I would go for the success=true but maybe for wrong reasons : I'm used to storage being quirky or not exactly the same everywhere (of depening on the browser config)
so I rely on it only when it's kinf of mandatory, like data persistence ofc
I would fully leverage nuxt and do /books/:id?success or /books/:id/success
if at some point the redirection isn't direct or you don't want to play around with the URL too much, you could use composables or something like that too :
You create an array of bookId, when someone opens a book you check if the idea is in the array for "further actions" (like "hey, it's new"). That will work as long as the user doesn't leave or fully refresh the page before reaching it
the good point with that is, if people can share links because both having access to the book/:id, they would both see the message because of the success in the link (and will see it forever and if they bookmark it that way XD)
I ended up using
success=true just like you suggested. It's the most forward approach, even though it has the issue of being persistent so long as the parameter existing in the url. I'll revisit this topic in the future to see if I can come up with a better approach.