-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Closed
Labels
feature / enhancementNew feature or requestNew feature or requestformsStuff relating to forms and form actionsStuff relating to forms and form actionslow hanging fruitready to implementplease submit PRs for these issues!please submit PRs for these issues!
Milestone
Description
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
Devr-pro and teemingc
Metadata
Metadata
Assignees
Labels
feature / enhancementNew feature or requestNew feature or requestformsStuff relating to forms and form actionsStuff relating to forms and form actionslow hanging fruitready to implementplease submit PRs for these issues!please submit PRs for these issues!