Why form actions handle mutations in Svelte - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a form action that handles form submission.

Svelte

export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const name = formData.get([1]);
    return { success: true, name };
  }
};

Drag options to blanks, or click blank then click option'

A"email"

B"username"

C"name"

D"password"

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong field name like "username" or "email" causes the action to get undefined.

The form action extracts the "name" field from the submitted form data using formData.get("name").

2fill in blank

medium

Complete the code to return a mutation result from the form action.

Svelte

export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const message = formData.get("message");
    // Simulate saving message
    return { [1]: true, message };
  }
};

Drag options to blanks, or click blank then click option'

Aerror

Bpending

Cloading

Dsuccess

Attempts:

3 left

💡 Hint

Common Mistakes

Returning error or loading instead of success.

The form action returns an object with success: true to indicate the mutation succeeded.

3fill in blank

hard

Fix the error in the form action that prevents mutation handling.

Svelte

export const actions = {
  default: async ({ request }) => {
    const formData = await request.[1]();
    const email = formData.get("email");
    return { success: true, email };
  }
};

Drag options to blanks, or click blank then click option'

Aformdata

BformData

CformData()

DformData.get

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase formdata() causes a runtime error.

Trying to call formData.get directly on request.

The correct method to get form data is request.formData() with capital D and no extra parentheses inside.

4fill in blank

hard

Fill both blanks to correctly handle a form mutation and return a message.

Svelte

export const actions = {
  default: async ({ request }) => {
    const formData = await request.[1]();
    const comment = formData.get([2]);
    return { success: true, comment };
  }
};

Drag options to blanks, or click blank then click option'

AformData

B"comment"

C"text"

Dformdata

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase formdata() or wrong field name.

The method to get form data is formData() and the field name is "comment".

5fill in blank

hard

Fill all three blanks to handle a form mutation that updates user data.

Svelte

export const actions = {
  default: async ({ request }) => {
    const formData = await request.[1]();
    const username = formData.get([2]);
    const age = Number(formData.get([3]));
    // pretend to save username and age
    return { success: true, username, age };
  }
};

Drag options to blanks, or click blank then click option'

AformData

B"username"

C"age"

Dformdata

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase formdata() or wrong field names causes errors.

The method is formData(), and the form fields are "username" and "age".