Add a `clear` and `reset` methods to the `form` remote function
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the problem
The form remote function doesn't provide a way to clear form results or reset form fields programmatically.
E.g. I'd like to be able to do todosForm.clear() to clear the result property and todosForm.reset() to reset the associated form element.
These methods could help with:
- Clear error/success messages after seeing them
- Hiding/showing some other element based on the result
- Reset form after submission for repeated use
Describe the proposed solution
I would like to see two new methods added to the RemoteForm interface:
clear()- Clears the form result (could setresulttoundefined)reset()- Resets the form fields using the HTML form element's built-inreset()method
Example usage:
<script>
import { myForm } from './form.remote.js';
</script>
<form {...myForm}>
<input name="data" />
<button type="submit">Submit</button>
</form>
<button onclick={() => myForm.clear()}>Clear Result</button>
<button onclick={() => myForm.reset()}>Reset Form</button>
{#if myForm.result}
<p>Result: {myForm.result}</p>
{/if}
Alternatives considered
A workaround is to manually manage separate reactive variables to track form state/results:
<script>
import { myForm } from './form.remote.js';
let showResult = $state(false);
let resultMessage = $state('');
function clearResult() {
showResult = false;
resultMessage = '';
}
function resetForm(formElement) {
formElement.reset();
}
</script>
<form {...myForm.enhance(async ({ form, submit }) => {
await submit();
// Manual state management
showResult = true;
resultMessage = myForm.result;
})} bind:this={formElement}>
<input name="data" />
<button type="submit">Submit</button>
</form>
<button onclick={() => clearResult()}>Clear Result</button>
<button onclick={() => resetForm(formElement)}>Reset Form</button>
{#if showResult}
<p>{resultMessage}</p>
{/if}
Importance
would make my life easier
Additional Information
I have created a possible implementation here: https://github.com/thomasmol/kit/pull/1
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the RemoteForm interface and the form remote function entry point, then trace how the associated HTML form element is accessed. Confirm the existing result and form-enhancement behavior before defining what clear() and reset() should affect. Done means both methods are available on RemoteForm, clear removes the result, and reset restores the associated form fields.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100