Skip to content

Expose submitter to use:enhance SubmitFunction parameter #9414

@karimfromjordan

Description

@karimfromjordan

Describe the problem

Currently it's a bit difficult to manage the submission status of (multiple) forms and do things like disabling the submit button and apply a CSS class while the form is loading. There already is an issue going a bit into this. In the meantime a simple non-breaking change to the enhance action could already help.

Describe the proposed solution

It would be nice if the enhance form action would expose the submitter of the submit event. This would allow us to do things like the following without having to create multiple loading variables and/or wrap the list item/form in a separate component.

<ol>
  {#each files as file (file.name)}
    <li>
      <span>{file.name}</span>
      <form
        method="POST"
        action="?/delete"
        use:enhance={({ submitter }) => {
          submitter.setAttribute("disabled", "true");

          return ({ update }) => {
            update().then(() => submitter.removeAttribute("disabled"));
          };
        }}
      >
        <button name="filename" value={file.name}>
          Delete
        </button>
      </form>
    </li>
  {/each}
</ol>

Currently we can of course use form.querySelector('button') but this just adds a bit more code and wouldn't work with multiple submit buttons.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions