Trigger form submit and use action prop to process data entered in a form.

Author: salamca

src/app/[lang]/edit/(crag)/[cragSlug]/sectors/components/edit-sectors/sector-dialog.tsx

@@ -5,6 +5,7 @@ import {
   FormEvent,
   SetStateAction,
   useEffect,
+  useRef,
   useState,
 } from "react";
 import createSectorAction from "../../server-actions/create-sector-action";
@@ -56,6 +57,8 @@ function SectorDialog({
     }
   }, [sector, formType]);
 
+  const formRef = useRef<HTMLFormElement>(null);
+
   const [nameError, setNameError] = useState("");
   const [loading, setLoading] = useState(false);
 
@@ -70,7 +73,11 @@ function SectorDialog({
     setNameError("");
   };
 
-  const handleConfirm = async () => {
+  const handleConfirm = () => {
+    formRef.current?.requestSubmit();
+  };
+
+  const handleFormAction = async () => {
     setLoading(true);
 
     // validate form
@@ -115,11 +122,6 @@ function SectorDialog({
     router.refresh();
   };
 
-  const handleFormSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    handleConfirm();
-  };
-
   return (
     <Dialog
       title={formType === "new" ? "Dodajanje sektorja" : "Urejanje sektorja"}
@@ -138,7 +140,7 @@ function SectorDialog({
         dontCloseOnConfirm: true,
       }}
     >
-      <form onSubmit={handleFormSubmit}>
+      <form action={handleFormAction} ref={formRef}>
         <TextField
           label="Ime sektorja"
           value={name}

src/app/[lang]/edit/(crag)/components/crag-form.tsx

@@ -165,7 +165,7 @@ function CragForm({ formType, countriesWithAreas, crag }: TCragFormProps) {
     setCragCoordinatesError("");
   };
 
-  const handleSaveClick = async () => {
+  const handleFormAction = async () => {
     setLoading(true);
 
     // Validate form
@@ -258,7 +258,7 @@ function CragForm({ formType, countriesWithAreas, crag }: TCragFormProps) {
   return (
     <div className="flex justify-center px-4 xs:px-8 mt-7">
       <div className="w-full max-w-2xl">
-        <form onSubmit={(e) => e.preventDefault()}>
+        <form action={handleFormAction}>
           {/* Main grid for inputs layout */}
           <div className="grid grid-cols-2 gap-x-4 gap-y-6">
             {/* Crag name */}
@@ -548,7 +548,7 @@ function CragForm({ formType, countriesWithAreas, crag }: TCragFormProps) {
               <Button variant="secondary" disabled={loading}>
                 Prekliči
               </Button>
-              <Button onClick={handleSaveClick} loading={loading}>
+              <Button type="submit" loading={loading}>
                 Shrani
               </Button>
             </div>