SvelteKit中page.svelte表单数据无法传递至page.server.ts求助

核心问题排查 #

你遇到的表单数据传递失败，主要由三个明确的问题导致：

1. 字段名不匹配：表单中第一个输入框的name是todaysDate，但server代码里用formData.get('date')获取，名称不一致导致拿不到值。
2. 未指定命名Action：你在actions里定义了create命名action，但表单没有指定对应的action路径，默认会调用default action（你未定义），因此无法触发目标逻辑。
3. DOM结构错误：提供的page.svelte代码中，seller_name对应的<div>标签未闭合，会导致表单结构异常，影响数据提交。

修复后的代码示例 #

修正后的page.svelte

<form class="input-container" method="POST" action="?/create">
  <h2 class="text-xl font-bold mb-2">Contract Inputs</h2>
  <div>
    <label id="todaysDate" for="todayDate" class="block">todaysDate</label>
    <input
      id="todaysDate"
      type="text"
      name="todaysDate"
      class="border-2 border-neutral-800 w-full px-4 py-2"
    />
  </div>
  <div class="mt-2">
    <label id="seller_Name" for="seller_name" class="block">seller_Name</label>
    <input
      id="seller_name"
      type="text"
      name="seller_name"
      class="border-2 border-neutral-800 w-full px-4 py-2"
    />
  </div> <!-- 修复未闭合的div标签 -->
  <!-- 补充剩余7个输入框，确保每个输入框的name属性与server中获取的字段名完全一致 -->
  <div class="w-full flex justify-center mt-3">
    <button
      class="border-2 border-neutral-900 text-neutral-900 px-4 py-2 font-light hover:border-neutral-500"
      type="submit">Sign Up</button
    >
  </div>
</form>

修正后的page.server.ts关键部分

export const actions = {
  create: async (event: RequestEvent) => {
    const formData = await event.request.formData();

    // 修正字段名，与表单中的name属性严格对应
    const todaysDate = formData.get('todaysDate');
    const seller_name = formData.get('seller_name');
    const property_address = formData.get('property_address');
    const price = formData.get('price');
    const deposit = formData.get('deposit');
    const legal_description = formData.get('legal_description');
    const county = formData.get('county');
    const closing_monthday = formData.get('closing_monthday');
    const buyer_name = formData.get('buyer_name');

    // 可选：添加必填字段验证
    if (!todaysDate || !seller_name) {
      return fail(400, { error: '必填字段不能为空' });
    }

    // 此处添加转发到外部API的逻辑
    // 示例：
    // const apiResponse = await fetch('你的外部API地址', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify({
    //     todaysDate,
    //     seller_name,
    //     // 其他字段
    //   })
    // });

    // if (!apiResponse.ok) {
    //   return fail(500, { error: '调用外部API失败' });
    // }

    // 提交成功后可返回状态或重定向
    return { success: true };
  }
};

额外调试建议 #

• 在create action中添加console.log(formData)，开发环境下终端会输出接收到的表单数据，方便验证字段是否正确传递。
• 确保所有输入框的name属性与formData.get()的参数完全一致（大小写敏感）。
• 移除之前添加的自定义on:submit函数，原生表单提交不需要额外阻止默认行为，避免干扰数据传递。

内容的提问来源于stack exchange，提问作者ImBadAtThis