Why form actions handle mutations in Svelte - See It in Action

Why Form Actions Handle Mutations in Svelte

📖 Scenario: You are building a simple Svelte form to collect user feedback on a website. The form will send data to the server and update the UI based on the server response.

🎯 Goal: Create a Svelte form that uses a form action to handle data submission and mutation. The form action will process the data and update the UI without a full page reload.

📋 What You'll Learn

Create a Svelte component with a form element

Define a form action function to handle the form submission

Use the form action to mutate the UI state after submission

Display a confirmation message after successful submission

💡 Why This Matters

🌍 Real World

Forms are common on websites for collecting user input. Handling form submissions with actions lets you update the page smoothly without full reloads.

💼 Career

Understanding form actions and UI mutations is essential for building interactive web apps with Svelte, a popular modern framework.

1

Set up the initial form data

Create a Svelte component with a let feedback variable initialized to an empty string and a let message variable initialized to an empty string.

Svelte

let feedback = "";
let message = "";

Hint

Use let to declare reactive variables in Svelte.

2

Add the form element and bind input

Add a <form> element with a <textarea> inside it. Bind the textarea value to the feedback variable using bind:value={feedback}. Add a submit button with the text 'Send Feedback'.

Svelte

let feedback = "";
let message = "";


  
  Send Feedback

Hint

Use bind:value to connect the textarea to the variable.

3

Create the form action to handle submission

Define an async function called submitFeedback that takes an event parameter. Inside, prevent the default form submission with event.preventDefault(). Then simulate sending data by awaiting a Promise that resolves after 500ms. After that, set message to 'Thank you for your feedback!'. Attach this function to the form's on:submit event.

Svelte

let feedback = "";
let message = "";

async function submitFeedback(event) {
  // Your code here
}


  
  Send Feedback

Hint

Use event.preventDefault() to stop the page reload and update the message after a delay.

4

Display the confirmation message

Add a <p> element below the form that shows the message variable only if message is not empty. Use Svelte's {#if} block to conditionally render the message.

Svelte

let feedback = "";
let message = "";

async function submitFeedback(event) {
  event.preventDefault();
  await new Promise(resolve => setTimeout(resolve, 500));
  message = 'Thank you for your feedback!';
}


  
  Send Feedback


{#if message}
  {message}
{/if}

Hint

Use Svelte's {#if} block to show the message only when it exists.