How to Use on:submit in Svelte for Form Handling

In Svelte, use on:submit on a <form> element to run a function when the form is submitted. Prevent the default page reload by calling event.preventDefault() inside the handler. This lets you handle form data smoothly without refreshing the page.

Syntax

The on:submit directive attaches a submit event listener to a form. The handler function receives the event object, where you usually call event.preventDefault() to stop the page from reloading.

• <form on:submit={handleSubmit}>: Attach the submit event.
• function handleSubmit(event) { ... }: The function called on submit.
• event.preventDefault(): Stops default form submission behavior.

svelte

<form on:submit={handleSubmit}>
  <!-- form inputs -->
</form>

<script>
  function handleSubmit(event) {
    event.preventDefault();
    // handle form data here
  }
</script>

Example

This example shows a simple form with a text input. When submitted, it prevents the page reload and displays the entered name below the form.

svelte

<script>
  let name = '';
  let submittedName = '';

  function handleSubmit(event) {
    event.preventDefault();
    submittedName = name;
  }
</script>

<form on:submit={handleSubmit} aria-label="Name form">
  <label for="nameInput">Enter your name:</label>
  <input id="nameInput" type="text" bind:value={name} required aria-required="true" />
  <button type="submit">Submit</button>
</form>

{#if submittedName}
  <p>You submitted: <strong>{submittedName}</strong></p>
{/if}

Output

A form with a text input and submit button. After typing a name and clicking submit, the page does not reload and shows "You submitted: [name]" below the form.

Common Pitfalls

Common mistakes when using on:submit include:

• Not calling event.preventDefault(), causing the page to reload and lose data.
• Using on:click on the submit button instead of on:submit on the form, which misses submissions triggered by pressing Enter.
• Not binding input values, so form data is not captured.

svelte

<!-- Wrong: page reloads on submit -->
<form on:submit={handleSubmit}>
  <input type="text" />
  <button type="submit">Submit</button>
</form>

<script>
  function handleSubmit(event) {
    // Missing event.preventDefault()
    console.log('Submitted');
  }
</script>

<!-- Right: prevent default to stop reload -->
<form on:submit={handleSubmit}>
  <input type="text" bind:value={value} />
  <button type="submit">Submit</button>
</form>

<script>
  let value = '';
  function handleSubmit(event) {
    event.preventDefault();
    console.log('Submitted:', value);
  }
</script>

Quick Reference

Feature	Description	Example
on:submit	Attach submit event handler to form
event.preventDefault()	Stop page reload on submit	function handleSubmit(e) { e.preventDefault(); }
bind:value	Bind input value to variable
Form accessibility	Use labels and aria attributes	Name

Key Takeaways

Use on:submit on the <form> element to handle form submissions.

Always call event.preventDefault() in the submit handler to prevent page reload.

Bind input values with bind:value to access form data easily.

Use on:submit instead of on:click on buttons to catch all submit events, including Enter key presses.

Add labels and ARIA attributes for accessible forms.