How to Handle Form Submit in Svelte: Simple Guide

In Svelte, handle form submission by adding an on:submit event handler to the <form> element and call event.preventDefault() inside the handler to stop the page from reloading. Then, process the form data as needed within the handler function.

Why This Happens

When you submit a form in Svelte without preventing the default behavior, the browser reloads the page. This happens because the form's natural action is to send data and refresh the page, which interrupts your JavaScript code.

svelte

<form on:submit={handleSubmit}>
  <input type="text" bind:value={name} />
  <button type="submit">Submit</button>
</form>

<script>
  let name = '';
  function handleSubmit(event) {
    alert(`Name submitted: ${name}`);
  }
</script>

Output

Page reloads immediately on submit, alert may not show or flashes briefly.

The Fix

To fix this, call event.preventDefault() inside your submit handler. This stops the page reload and lets you handle the form data smoothly in JavaScript.

svelte

<form on:submit={handleSubmit}>
  <input type="text" bind:value={name} placeholder="Enter your name" />
  <button type="submit">Submit</button>
</form>

<script>
  let name = '';
  function handleSubmit(event) {
    event.preventDefault();
    alert(`Name submitted: ${name}`);
  }
</script>

Output

Alert shows 'Name submitted: [entered name]' and page does not reload.

Prevention

Always remember to prevent the default form submission behavior in Svelte by calling event.preventDefault() in your submit handler. Use bind:value to keep input values reactive and handle data inside the handler. You can also use Svelte's use:enhance for advanced form handling.

Enable linting tools that warn about missing preventDefault in event handlers to catch this early.

Related Errors

Other common mistakes include:

• Not binding input values, so form data is not reactive.
• Using on:click on the submit button instead of on:submit on the form, which can miss submissions triggered by pressing Enter.
• Forgetting to set type="submit" on the button, causing the form not to submit.

Key Takeaways

Use on:submit on the <form> element to handle form submission in Svelte.

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

Bind input values with bind:value for reactive form data.

Avoid using on:click on buttons for form submission logic.

Use linting tools to catch missing preventDefault calls early.