Normalmente, eu armazeno todos os valores de um formulário e envio uma solicitação POST ao servidor se for um formulário de várias páginas. Mas e se eu tiver um formulário como este no meu +page.svelte
:
<script lang="ts">
import {enhance} from "$app/forms";
let page: number = 1;
const nextPage = () => {
page++;
}
const prevPage = () => {
page--;
}
</script>
<form method="POST" use:enhance>
{#if page === 1}
<label for="name">Name</label>
<input type="text" id="name" name="name" value="John Doe">
{:else if page === 2}
<label for="email">Email</label>
<input type="email" id="email" name="email">
{:else if page === 3}
<label for="password">Password</label>
<input type="password" id="password" name="password">
<button type="submit">Register</button>
{:else}
<p>Thank you for registering!</p>
{/if}
<button type="button" on:click={prevPage} disabled={page === 1}>Previous</button>
<button type="button" on:click={nextPage} disabled={page === 4}>Next</button>
</form>
e quero enviar esses dados do formulário para o servidor, dentro dele, +page.server.ts
para que o servidor registre todo o valor (posso trabalhar com esses valores mais tarde, como autenticação ou algo assim)
+page.server.ts
Arquivo:
export const actions = {
default: async ({request}: any) => {
const formData = await request.formData();
const name = formData.get('name');
const email = formData.get('email');
const password = formData.get('password');
console.log(name, email, password)
}
}
Ao enviar, o servidor está imprimindonull null ezpass
dado esse nome = John, email = [email protected], senha = ezpass)
Existe alguma maneira de enviar todas as informações para +page.server.ts assim? Ou devo fazer o contrário, que é armazenar tudo e fazer uma solicitação POST no +page.svelte (não quero fazer isso, quero usar ações de formulário).
Em vez de usar
#if
, que remove o elemento completamente, basta ocultar as páginas que não são a atual.Por exemplo