AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • 主页
  • 系统&网络
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • 主页
  • 系统&网络
    • 最新
    • 热门
    • 标签
  • Ubuntu
    • 最新
    • 热门
    • 标签
  • Unix
    • 最新
    • 标签
  • DBA
    • 最新
    • 标签
  • Computer
    • 最新
    • 标签
  • Coding
    • 最新
    • 标签
主页 / coding / 问题 / 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

如何使用表单操作在 SvelteKit 中提交多页表单?

  • 772

通常,如果是多页表单,我会存储表单的所有值并向服务器发送 POST 请求。但是如果我的表格中有这样的表格怎么办+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>

我想将这些表单数据发送到服务器内部,+page.server.ts以便服务器记录所有值(我可以稍后使用这些值,例如身份验证或其他东西)

+page.server.ts文件:

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

提交后,服务器正在打印null null ezpass

假设名称 = John,电子邮件 = [email protected],密码 = ezpass)

有什么方法可以像这样将所有信息发送到 +page.server.ts 吗?或者我应该采取另一种方式,即存储所有内容并在 +page.svelte 中发出 POST 请求(我不想这样做,我想使用表单操作)。

svelte
  • 1 1 个回答
  • 13 Views

1 个回答

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

    不要使用#if完全删除元素,而只需隐藏不是当前页面的页面即可。

    例如

    <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

相关问题

  • 将 Svelte 实现到单个 HTML 容器中

  • 在 VSCode 中查看 svelte 组件时,如何转到导入该组件的父文件

Sidebar

Stats

  • 问题 205573
  • 回答 270741
  • 最佳答案 135370
  • 用户 68524
  • 热门
  • 回答
  • Marko Smith

    使用 <font color="#xxx"> 突出显示 html 中的代码

    • 2 个回答
  • Marko Smith

    为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类?

    • 1 个回答
  • Marko Smith

    您可以使用花括号初始化列表作为(默认)模板参数吗?

    • 2 个回答
  • Marko Smith

    为什么列表推导式在内部创建一个函数?

    • 1 个回答
  • Marko Smith

    我正在尝试仅使用海龟随机和数学模块来制作吃豆人游戏

    • 1 个回答
  • Marko Smith

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

    • 3 个回答
  • Marko Smith

    为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)?

    • 4 个回答
  • Marko Smith

    为什么库中不调用全局变量的构造函数?

    • 1 个回答
  • Marko Smith

    std::common_reference_with 在元组上的行为不一致。哪个是对的?

    • 1 个回答
  • Marko Smith

    C++17 中 std::byte 只能按位运算?

    • 1 个回答
  • Martin Hope
    fbrereto 为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类? 2023-12-21 00:31:04 +0800 CST
  • Martin Hope
    比尔盖子 您可以使用花括号初始化列表作为(默认)模板参数吗? 2023-12-17 10:02:06 +0800 CST
  • Martin Hope
    Amir reza Riahi 为什么列表推导式在内部创建一个函数? 2023-11-16 20:53:19 +0800 CST
  • Martin Hope
    Michael A fmt 格式 %H:%M:%S 不带小数 2023-11-11 01:13:05 +0800 CST
  • Martin Hope
    God I Hate Python C++20 的 std::views::filter 未正确过滤视图 2023-08-27 18:40:35 +0800 CST
  • Martin Hope
    LiDa Cute 为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)? 2023-08-24 20:46:59 +0800 CST
  • Martin Hope
    jabaa 为什么库中不调用全局变量的构造函数? 2023-08-18 07:15:20 +0800 CST
  • Martin Hope
    Panagiotis Syskakis std::common_reference_with 在元组上的行为不一致。哪个是对的? 2023-08-17 21:24:06 +0800 CST
  • Martin Hope
    Alex Guteniev 为什么编译器在这里错过矢量化? 2023-08-17 18:58:07 +0800 CST
  • Martin Hope
    wimalopaan C++17 中 std::byte 只能按位运算? 2023-08-17 17:13:58 +0800 CST

热门标签

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

Explore

  • 主页
  • 问题
    • 最新
    • 热门
  • 标签
  • 帮助

Footer

AskOverflow.Dev

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve