Next.js Discord

Discord Forum

Server Action not Working

Answered
Arinji posted this in #help-forum
Open in Discord
ArinjiOP
Hi, im new to server actions so i dont know if im doing something wrong
form.tsx
<form
      action={sendMail}
      className="w-full h-full flex flex-col md:flex-row items-center justify-center gap-6 mt-10"
    >
      <div className="...">
        <div className="...">
          <div className="...">
            <p className="text-white text-[20px] shrink-0">Name:</p>
          </div>
          <input
            id="name"
            name="name"
            required
            type="text"
            className="..."
          />
        </div>
        <div className="h-fit w-full flex flex-row items-center justify-start gap-5">
          <div className="w-[60%] h-full flex flex-col items-start justify-center">
            <p className="text-white text-[20px] shrink-0">Subject:</p>
          </div>
          <input
            id="subject"
            name="subject"
            required
            type="text"
            className="... "
          />
        </div>
        <div className="h-fit w-full flex flex-row items-center justify-start gap-5">
          <div className="w-[60%] h-full flex flex-col items-start justify-center">
            <p className="text-white text-[20px] shrink-0">Your Email:</p>
          </div>
          <input
            id="email"
            name="email"
            required
            type="email"
            className="... "
          />
        </div>
      </div>
     
      <div className="...">
        <SubmitButton />
      </div>
    </form>



Submit Button
"use client";
export function SubmitButton() {
  return (
    <button
      type="submit"
      onClick={(e) => {
        e.preventDefault();
      }}
      className="...."
    >
      <p className="text-[20px]">Submit</p>
    </button>
  );
}


Server Action
"use server";
export async function sendMail(formData: FormData) {
  console.log(formData);
}

But it dosent seem to log the values?
Answered by Barbary Lion
Maybe try removing the preventDefault / onClick method
View full answer

18 Replies

Barbary Lion
Did you activated server actions in your [config](https://nextjs.org/docs/app/api-reference/functions/server-actions#convention)?
ArinjiOP
yup,
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
serverActions: true,
},
};

module.exports = nextConfig;


I didnt restart my dev server though, lemme try that
Barbary Lion
Maybe try removing the preventDefault / onClick method
Answer
ArinjiOP
but that would make the whole page refresh right?
Barbary Lion
In regular HTML/Client components yes, in Next I'm not sure
ArinjiOP
lemmme try
Barbary Lion
(I've only used Server Actions using the useTransition strategy, but I'm just suggesting the first things I would try if I were you)
ArinjiOP
oh yea i worked
and it didnt refresh :D
Barbary Lion
💪
ArinjiOP
a quick question, the disabled styling dosent seem to work this is kinda my first time trying out a form without any use states, so would you happen to know why its like not working out?
i thought adding required would work, but it dosent seem to update the styles
Barbary Lion
Default HTML Form styling for "required"? They are browser dependent. What are you expecting to see and what are you seeing?
ArinjiOP
well i just made sm small styling changes like make the button bg darker etc
but i dont see this, i just seee the default styles
for example
disabled:text-white text-brand-primary

where the brand primary is a type of blue color
Barbary Lion
My tailwind knowledge is very limited 😦
ArinjiOP
oh, okii no worries lol, its all good :D