AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • Início
  • system&network
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • Início
  • system&network
    • Recentes
    • Highest score
    • tags
  • Ubuntu
    • Recentes
    • Highest score
    • tags
  • Unix
    • Recentes
    • tags
  • DBA
    • Recentes
    • tags
  • Computer
    • Recentes
    • tags
  • Coding
    • Recentes
    • tags
Início / coding / Perguntas / 77164664
Accepted
tinykishore
tinykishore
Asked: 2023-09-24 03:45:05 +0800 CST2023-09-24 03:45:05 +0800 CST 2023-09-24 03:45:05 +0800 CST

Como posso enviar um formulário de várias páginas no SvelteKit com ações de formulário?

  • 772

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.tspara que o servidor registre todo o valor (posso trabalhar com esses valores mais tarde, como autenticação ou algo assim)

+page.server.tsArquivo:

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).

svelte
  • 1 1 respostas
  • 13 Views

1 respostas

  • Voted
  1. Best Answer
    H.B.
    2023-09-24T04:55:24+08:002023-09-24T04:55:24+08:00

    Em vez de usar #if, que remove o elemento completamente, basta ocultar as páginas que não são a atual.

    Por exemplo

    <div class="page" class:show={page === 1}>
        <label for="name">Name</label>
        <input type="text" id="name" name="name" value="John Doe">
    </div>
    <div class="page" class:show={page === 2}>
        <label for="email">Email</label>
        <input type="email" id="email" name="email">
    <div>
    ...
    
    <style>
      .page { display: none; }
      .page.show { display: block; }
    </style>
    
    • 1

relate perguntas

  • Implemente o Svelte em um único contêiner HTML

  • Ao visualizar um componente svelte no VSCode, como ir para o arquivo pai que importa este componente

Sidebar

Stats

  • Perguntas 205573
  • respostas 270741
  • best respostas 135370
  • utilizador 68524
  • Highest score
  • respostas
  • Marko Smith

    destaque o código em HTML usando <font color="#xxx">

    • 2 respostas
  • Marko Smith

    Por que a resolução de sobrecarga prefere std::nullptr_t a uma classe ao passar {}?

    • 1 respostas
  • Marko Smith

    Você pode usar uma lista de inicialização com chaves como argumento de modelo (padrão)?

    • 2 respostas
  • Marko Smith

    Por que as compreensões de lista criam uma função internamente?

    • 1 respostas
  • Marko Smith

    Estou tentando fazer o jogo pacman usando apenas o módulo Turtle Random e Math

    • 1 respostas
  • Marko Smith

    java.lang.NoSuchMethodError: 'void org.openqa.selenium.remote.http.ClientConfig.<init>(java.net.URI, java.time.Duration, java.time.Duratio

    • 3 respostas
  • Marko Smith

    Por que 'char -> int' é promoção, mas 'char -> short' é conversão (mas não promoção)?

    • 4 respostas
  • Marko Smith

    Por que o construtor de uma variável global não é chamado em uma biblioteca?

    • 1 respostas
  • Marko Smith

    Comportamento inconsistente de std::common_reference_with em tuplas. Qual é correto?

    • 1 respostas
  • Marko Smith

    Somente operações bit a bit para std::byte em C++ 17?

    • 1 respostas
  • Martin Hope
    fbrereto Por que a resolução de sobrecarga prefere std::nullptr_t a uma classe ao passar {}? 2023-12-21 00:31:04 +0800 CST
  • Martin Hope
    比尔盖子 Você pode usar uma lista de inicialização com chaves como argumento de modelo (padrão)? 2023-12-17 10:02:06 +0800 CST
  • Martin Hope
    Amir reza Riahi Por que as compreensões de lista criam uma função internamente? 2023-11-16 20:53:19 +0800 CST
  • Martin Hope
    Michael A formato fmt %H:%M:%S sem decimais 2023-11-11 01:13:05 +0800 CST
  • Martin Hope
    God I Hate Python std::views::filter do C++20 não filtrando a visualização corretamente 2023-08-27 18:40:35 +0800 CST
  • Martin Hope
    LiDa Cute Por que 'char -> int' é promoção, mas 'char -> short' é conversão (mas não promoção)? 2023-08-24 20:46:59 +0800 CST
  • Martin Hope
    jabaa Por que o construtor de uma variável global não é chamado em uma biblioteca? 2023-08-18 07:15:20 +0800 CST
  • Martin Hope
    Panagiotis Syskakis Comportamento inconsistente de std::common_reference_with em tuplas. Qual é correto? 2023-08-17 21:24:06 +0800 CST
  • Martin Hope
    Alex Guteniev Por que os compiladores perdem a vetorização aqui? 2023-08-17 18:58:07 +0800 CST
  • Martin Hope
    wimalopaan Somente operações bit a bit para std::byte em C++ 17? 2023-08-17 17:13:58 +0800 CST

Hot tag

python javascript c++ c# java typescript sql reactjs html

Explore

  • Início
  • Perguntas
    • Recentes
    • Highest score
  • tag
  • help

Footer

AskOverflow.Dev

About Us

  • About Us
  • Contact Us

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve