Nuxt•15mo ago

[resolved] How would you implement showing a success message after posting a form?

I have this use case:

User navigate to
```
/books/create
```
```
/books/create
```
which displays a form to create a book
User fills the from and submits the form
In case of a successful submit, the user gets redirected to
```
/books/:id
```
```
/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

sessionStorage

or just simply redirect to

/books/:id?success=true

/books/:id?success=true

and then somehow omit the

success

success

query param.

What do you think? Are there existing solutions that solve this problem?

Omnislash•10/18/24, 7:55 AM

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)

Omnislash•10/18/24, 7:55 AM

so I rely on it only when it's kinf of mandatory, like data persistence ofc

Omnislash•10/18/24, 7:56 AM

I would fully leverage nuxt and do /books/:id?success or /books/:id/success

Omnislash•10/18/24, 7:58 AM

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

Omnislash•10/18/24, 7:58 AM

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)

OOmnislash I would go for the success=true but maybe for wrong reasons : I'm used to storag...

-OP•11/13/24, 2:57 PM

I ended up using 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.