How to handle re-submitted form changes after user go back in browser history?

[Sairahcaz]

Hello,

first of all, thanks for Inertiajs it's so awesome, you guys doing a great job!

In my Inertia/Vue3/Laravle app I have a form on a route, lets say /meetings/create. After I fill in the inputs I press submit and I got redirected to /meetings/1. Now if I go back in the browser (cause I maybe want to change my inputs) and press again submit another db entity got created and I got redirected to /meetings/2. How can I avoid this behavior? My first idea was to somehow manipulate the browser history and redirect the user to /meetings/1/edit, when he gos back in the browser history... Whats the best practice here, or how you guys handle such issues? Thank you!

[Sairahcaz]

Bump...
Any help here?

[Sairahcaz]

would be very great to get some help on this issue!

[jonagoldman]

Without seeing your actual code its difficult to answer...

In my opinion you should avoid manipulating the browser history.
If you submit a form and then go back, you return to the same form again, that's the correct default browser behavior.
You can redirect to meetings/1/edit after submit, don't see why not, but is that what the user wants? To edit a meeting that was just created? Maybe, I don't know what are you trying to do exactly.

In general, you should reset the form after submit, something like:

import { useForm } from '@inertiajs/inertia-vue3'

setup () {
  const form = useForm({
    email: '',
  })

  const submit = () => {
    form.post('/meetings', {
      onFinish: () => form.reset(),
    })
  }

  return { form, submit }
}

[Sairahcaz]

Hey @jonagoldman,

thanks for your reply. But no, I don't want to redirect to /meetings/1/edit after the meeting is created. I thought about to redirect to /meetings/1/edit after the user already created the meeting and then wants to go back in browser history, because he maybe wants to change the name or members for the meeting. But with the current behavior, every time he does this, a new meeting gets created...
So I think the best option here is really to manipulate the browser history and take him back to the edit route, when he presses back.

Does anyone know how to accomplish this within inertia?

Here is the flow:

1. User goes to /meetings/create
2. User enters details for the meeting and maybe invite some members
3. User press "Continue", the meeting gets created, and he gets redirected to /meetings/1
4. User don't like the name of his meeting and press back in browser to change the name of the meeting

Here I want him to be routed to /meetings/1/edit (edit and create route looks the same).

Or am I broken by design here?
But I need to say it feels very intuitive, the way I want it 😄

[jonagoldman]

Oh I see your point @Sairahcaz, if it feels intuitive then I don't think its broken at all.

You can manipulate the browser history using window.history.replaceState, see replaceState() Mozilla docs.

I also recommend reading the full Inertia docs, not very long but very helpful, e.g. Remembering state and Replace link.