sveltejs / sveltejs/kit

Add a `clear` and `reset` methods to the `form` remote function

Open
#14,210 18 comments 23 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

forms
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:

  1. clear() - Clears the form result (could set result to undefined)
  2. reset() - Resets the form fields using the HTML form element's built-in reset() 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.