Multiple form buttons with transition.submission

[Adam-Collier]

More out of curiosity more than anything, but at the moment having two buttons (in my example one to edit and one to delete) and transition.submission causes both buttons to change their text on form submit. I'm interested to know if there's a way we can distinguish one intention from the other in the transition and apply the text changes accordingly?

example button code:

<button className="btn" name="button">
    {transition.submission ? "Saving..." : "Edit Resource"}
</button>
<button className="btn bg-transparent border border-color-red-600 text-red-600 hover:bg-red-600 hover:text-white" type="submit" name="button" value="delete">
    {transition.submission ? "Deleting..." : "Delete Resource"}
</button>

What the form looks like:

[stivaugoin]

I don't know how your form is built but my guess is to have two different form. One for the edit with all fields and another for the delete.
You can add an hidden field on each form that content a type of form. For exemple

<form>
  <input type="hidden" name="type" value="edit" />
  ...
</form>

<form>
  <input type="hidden" name="type" value="delete" />
  ...
</form>

Now, when transition.submission is defined you have access to formData from transition?.submission?.formData.get("type").

Exemple:

const isDeleting = transition?.submission?.formData.get("type") === "delete";
const isSaving = transition?.submission?.formData.get("type") === "edit";

...

<button>
    {isSaving ? "Saving..." : "Edit Resource"}
</button>
<button>
    {isDeleting ? "Deleting..." : "Delete Resource"}
</button>

I hope its helping you 🤞

[runoncedev]

I assumed you could do something like this to identify multiple forms on the same route:

const fooFormTransition = useTransition('foo')

<Form name="foo">

But there is no such thing :(

[kiliman]

You can add name/value attributes to the button. Form data will include action value of the button that was clicked. If you use the same name, you can determine which button it was.

<button name="action" value="save" />
<button name="action" value="delete" />

const isSaving = transition.submission?.formData.get("action") === "save";