Server actions and form reset
Unanswered
American black bear posted this in #help-forum
American black bearOP
I am currently using the new experimental server actions:
async function submitResponse(formData: any) {
"use server";
console.log(formData);
await fetch(
"...",
{
method: "POST",
body: JSON.stringify({
name: formData.get("name"),
email: formData.get("email"),
message: formData.get("message"),
time: new Date().toISOString(),
}),
}
}
this is the server action function. Now I want a way to reset the form.
async function submitResponse(formData: any) {
"use server";
console.log(formData);
await fetch(
"...",
{
method: "POST",
body: JSON.stringify({
name: formData.get("name"),
email: formData.get("email"),
message: formData.get("message"),
time: new Date().toISOString(),
}),
}
}
this is the server action function. Now I want a way to reset the form.
1 Reply
Polar bear
Use client component and wrapper method to call server action, then you can reset form
async function handleSubmit(formData: FormData) {
try {
//todo: client side data validation, file size, type etc
const data = await submitResponse(formData);
//todo: inform user of success, etc...
console.log(data);
} catch (error) {
//todo: error display
console.log(error);
}
And
<form action={handleSubmit}>
Have a look at https://createappai.com/blog/file-upload#error-handling
async function handleSubmit(formData: FormData) {
try {
//todo: client side data validation, file size, type etc
const data = await submitResponse(formData);
//todo: inform user of success, etc...
console.log(data);
} catch (error) {
//todo: error display
console.log(error);
}
And
<form action={handleSubmit}>
Have a look at https://createappai.com/blog/file-upload#error-handling