Issue passing user text input from ” on page.svelte to page.server.ts?

I have been unable to pass user text input collected in a form on my page.svelte file to its corresponding page.server.ts. I feel like I’ve tried every method/ configuration in the docs and those used by others in various guides to no avail. I hate this so much.

in my page.svelte I have tried various types of form actions according to sveltekit docs. I’m attempting to collect 9 user inputs pass them to my page.server.ts file who recieves and sends to an outside API. I’ve tried various implementations/ configurations of the forms. I’ve tried <form on:submit-{function_POST}> and binds to pass via a function to my page.server.ts file. I’ve also created new routes and tried all the configurations. I’ve created an server.js file to try and post to that. Still nothing. I cannot get the forms to pass the inputs internally. I do not want to post to the external api client side either.

<form class="input-container" method="POST">
  <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 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>

My page.server.ts file generally looks something like this below but I’ve also tried tons of different configurations, my suspicion is the problem lies on the my client side code anyways, not the server side.

import type { RequestEvent } from '@sveltejs/kit'
import { fail, redirect } from '@sveltejs/kit'
import { dev } from '$app/environment'

export const load = async ({ locals: { getSession } }) => {
  return {
    Session: await getSession()
  };
};

export const actions = {
  create: async (event: RequestEvent) => {
    // get the form body from the event
    const formData = await event.request.formData();

    // Retrieve the user's email
    const date = formData.get('date');
    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');

Any help would be appreciated, I’ve sunk 15-20 hours into this and I’m literally wanting to break my computer at this point. Thanks in advance.

Looks like you’re missing the action URL.

You can either set the URL in the form:

<form action="?/create" ...>
   <!-- ... -->
</form>

Or leave it blank and name your action as “defaut” in +page.server.ts

export const actions = {
  default: async (event: RequestEvent) => {
    // ...
  }
}

Leave a Comment