SolidJS•2mo ago

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>

<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);
});

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

2 Replies

brenelz•2mo ago

Do you need a "use server" maybe? Also anything in the console?

ChrisThornham•2mo ago

Thanks, @brenelz . Nothing in the console. I just solved it. I built a child component called "NoteEdit" to handle the note/edit functionality for each note. I also placed the updateNote action in the "NoteEdit" child component. As a result, the updateNote action was being created multiple times. I solved the problem by defining the updateNote action in the parent and passing it as a prop to each "NoteEdit" child component.

Gaming

Programming

form action Breaking On Second Submit