contact email

src/components/DogContactForm.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import toast, { Toaster } from "react-hot-toast";
+import { foundMsg, logFormData } from "../services/PhpApi";
+
+
+export default function DogContactForm(
+    {toEmail, name, qr_id}: 
+    {toEmail: string, name: string, qr_id: string}) 
+{
+    const formdata_init = new FormData();
+    formdata_init.append('fromEmail', '');
+    formdata_init.append('msg', '');
+    const [formData, setFormData] = useState<FormData>(formdata_init);
+
+    const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => 
+    {
+        setFormData({
+            ...formData,
+            [e.currentTarget.name]:e.currentTarget.value
+        })
+
+        
+    }
+
+    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
+    {
+        e.preventDefault();
+
+        if(!Object.values(formData).every(val => val.trim() !== ''))
+        {
+            toast.error('Bitte alle Felder ausfüllen!');
+            return;
+        }
+
+//        const sendData: any = {...formData};
+        const sendData = new FormData();
+        const values = Object.values(formData);
+        const keys = Object.keys(formData);
+
+        for (const key of keys) 
+        {
+            const index = keys.indexOf(key);
+            sendData.append(key, values[index]);
+
+            console.log(key + ' ' + sendData.get(key));
+        }
+
+        sendData.append('toEmail', toEmail);
+        sendData.append('name', name);
+        sendData.append('qr_id', qr_id);
+
+        logFormData(sendData);
+
+        const data = await foundMsg(sendData);
+// const data =    {
+//                     success:0,
+//                     message: 'yyy'
+//                 };
+
+        if(data.success)
+        {
+            toast.success('Nachricht gesendet!');
+        }
+        else if(!data.success && data.message)
+        {
+            toast.error(data.message);
+        }
+    }
+
+    return (
+        <form id='idForm' onSubmit={submitForm}>
+        <Toaster toastOptions={{ position: "top-center" }} />
+        <div className='neben'>
+            <label htmlFor="email">Email: </label>                    
+            <input type="email" name="fromEmail" onChange={onChangeInput} placeholder="Deine Email" id="fromEmail" required />
+        </div>
+        <div className='neben'>
+            <label htmlFor="msg">Passwort: </label>
+            <input type="text" name="msg" onChange={onChangeInput} placeholder='Ich habe ${name} gefunden. Bitte rufen Sie mich an! Meine Telefonnummer: (bitte eintragen)' id="msg" />
+        </div> 
+        <button type="submit">Nachricht senden!</button>
+    </form>
+);
+
+}