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

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"

method="post"

in your form. But in this case, I definitely have

method="post"

method="post"

in my form.

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

Thanks,

Chris

SolidJS•2y ago•

3 replies

ChrisThornham

form action Breaking On Second Submit

<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

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"

method="post"

in your form. But in this case, I definitely have

method="post"

method="post"

in my form.

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

Thanks,

Chris

form action Breaking On Second Submit

Similar Threads

form action Breaking On Second Submit

Similar Threads

Similar Threads

Similar Threads