Recipe or provided function to ease working with multiple form submissions

[dummdidumm]

Describe the problem

export let form and $page.form are designed around having one form submitted at a time - which is the only way possible when JavaScript is disabled. When JavaScript is enabled however, you could have multiple in-flight form submissions at the same time. This is doable today in user-land, but maybe not immediately obvious how to do. #7120 is a symptom of that.

Describe the proposed solution

Either add a recipe that shows how to implement something like that, and/or provide a helper function that eases this.

One possibility would be to provide some kind of form creator function which you create for each form:

<script>
  const { form, state, action, enhance } = createForm('/?named-action');
</script>

<form method="POST" action={action} use:enhance>
  <input name="username" />
  {#if $form.usernameInvalid}
    <span>Username invalid</span>
  {/if}
  <button disabled={$state.submitting}>Submit</button
</form>

Calling createForm creates a encapsulated instance of a form life cycle with stores to track the submission state etc. Multiple of these can be used at once, for example inside a list of TODOs.

Another nice-to-have would be to have each instance from createForm be part of some app-wide context so you can see which submissions are currently running etc and show optimistic UI/loading spinners depending on that. Depending on how tight we want to couple this to built-ins, this would either be a custom-made setContext call at the desired place, or a global $page.forms

Alternatives considered

No response

Importance

nice to have

Additional Information

No response