SolidJSS
SolidJS•2y ago•
3 replies
ChrisThornham

form action Breaking On Second Submit

To learn about actions, I built a simple notes app. The app displays a list of notes. When you click an edit button, the note text turns into a text input that can be edited. You can see what I'm describing in this code.

<Show
  when={isEditing()}
  fallback={<div>{props.noteText}</div>}
>
  <form
    action={updateNote}
    method="post"
  >
    {/* New Note Input */}
    <input
      type="text"
      name="note"
      value={props.noteText}
      placeholder={props.noteText}
    />
    <input type="hidden" name="noteId" value={props.noteId} />
    {/* Submit Button */}
    <button>Save</button>
  </form>
</Show>


When you click save, the form calls the updateNote action.

const updateNote = action(async (formData: FormData) => {
  // get note data
  const newNote = formData.get("note");
  const noteId = formData.get("noteId");

  // update note in database...
    
  setIsEditing(false);
});


The first time I perform an edit, the action works as expected. The edit is made and I stay on the same page.

But if I try to make a second edit, the browser navigates to an action URL like this https://action/640465549 and the page shows a "This site can't be reached" message.

I've noticed the same error occurs if you forget to include method="post" in your form. But in this case, I definitely have method="post" in my form.

Does anyone know why this form is failing on the second submit?

Thanks,

Chris
Was this page helpful?