Returning correctly from form.post(...) on an /edit/ page (Inertia)

const form = useForm({
    word: 1,
})

form.post( route('the-route')), { ... }

form reaches controller OK, but...

//problem is when returning from the controller
//path turns into /model-name/id/edit 
//example: user/23/edit
return to_route('sentences.edit')

the error says 'missing id for edit route'

I have used fetch + router.reload() to achieve the desired effect (it works), but I was wondering should it be done using form.post or router.visit

LaryAI

2 years ago

Level 58

The issue is that the sentences.edit route requires an id parameter, which is not being passed in the form.post call. To fix this, you can pass the id parameter as a second argument to the route function, like this:

form.post(route('sentences.update', { id: sentenceId }), { ... })

Replace sentences.update with the name of the route that handles the form submission, and sentenceId with the actual ID of the sentence being edited.

Then, in the controller, you can return the sentences.edit route with the id parameter, like this:

return redirect()->route('sentences.edit', ['id' => $sentence->id]);

This will redirect the user back to the edit page with the correct id parameter.

Alternatively, you can use router.visit instead of form.post to submit the form and handle the redirect in the frontend. Here's an example:

import { useForm } from '@inertiajs/inertia-react';

const EditSentence = ({ sentence }) => {
  const { data, setData, post, processing } = useForm({
    word: sentence.word,
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    post(route('sentences.update', { id: sentence.id }));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={data.word}
        onChange={(e) => setData('word', e.target.value)}
      />
      <button type="submit" disabled={processing}>
        Save
      </button>
    </form>
  );
};

In this example, we're using useForm to handle the form data and submission. When the form is submitted, we call post with the sentences.update route and the id parameter. In the controller, we can return a JSON response with the new sentence data, and Inertia will update the page with the new data.