From 52e0800ce7dd3c3968283cf536d241e1f197dd82 Mon Sep 17 00:00:00 2001 From: Kar Date: Thu, 4 May 2023 13:51:40 +0530 Subject: [PATCH] formSubmit --- ...dd-school-form.tsx => add-school-form.jsx} | 83 +++++++++---------- src/pages/school-list.tsx | 2 +- src/pages/test/2.jsx | 36 ++++++++ 3 files changed, 75 insertions(+), 46 deletions(-) rename src/pages/{add-school-form.tsx => add-school-form.jsx} (73%) create mode 100644 src/pages/test/2.jsx diff --git a/src/pages/add-school-form.tsx b/src/pages/add-school-form.jsx similarity index 73% rename from src/pages/add-school-form.tsx rename to src/pages/add-school-form.jsx index 273b181..d770c42 100644 --- a/src/pages/add-school-form.tsx +++ b/src/pages/add-school-form.jsx @@ -1,40 +1,33 @@ -import React, { useState } from 'react'; -import Image from 'next/image' +// import React, { useState } from 'react'; +// import Image from 'next/image' import NavBar from '../components/NavBar' -import { Inter } from 'next/font/google' -const inter = Inter({ subsets: ['latin'] }) - function Postformvalue(props) { - const [formvalue, setFormvalue]= useState({school:'', interakto:'', early_start_program:'', anual:'', toddlers:'', country:'', end_date:'', }); - - const handleInput =(e)=>{ - const { name, value}= e.target; - setFormvalue({...formvalue, [name]:value}); - console.log(formvalue); - } - const handleFormsubmit= async (e)=>{ - e.preventDefault(); - - await fetch('http://localhost/devopsdeveloper/ReactFormvalue/', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - name:formvalue.school, - anual: formvalue.anual, - toddlers: formvalue.toddlers, - start_date: formvalue.country, - early_start_program: formvalue.early_start_program, - interakto: formvalue.interakto, - - }) - }); - console.log("success"); - - } - - return ( -
+export default function addSchoolForm() { + const handleSubmit = async (event) => { + event.preventDefault() + const data = { + "status":"published", + name: event.target.schoolName.value, + country: event.target.country.value, + + } + const JSONdata = JSON.stringify(data) + const endpoint = 'https://management.beanstalkedu.com/items/school' + const options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSONdata, + } + const response = await fetch(endpoint, options) + + const result = await response.json() + alert(`Is this your full name: ${result.data}`) + } + return ( +
@@ -43,18 +36,18 @@ const inter = Inter({ subsets: ['latin'] }) school

School Registration Form

-
+
- +
- +
- @@ -72,7 +65,7 @@ const inter = Inter({ subsets: ['latin'] })
- @@ -90,7 +83,7 @@ const inter = Inter({ subsets: ['latin'] })
- @@ -108,7 +101,7 @@ const inter = Inter({ subsets: ['latin'] })
- @@ -125,7 +118,7 @@ const inter = Inter({ subsets: ['latin'] })
- + {/* */}
@@ -133,6 +126,6 @@ const inter = Inter({ subsets: ['latin'] })
- ) -} -export default Postformvalue; \ No newline at end of file + ) + } + \ No newline at end of file diff --git a/src/pages/school-list.tsx b/src/pages/school-list.tsx index 22818c8..57d817f 100644 --- a/src/pages/school-list.tsx +++ b/src/pages/school-list.tsx @@ -4,7 +4,7 @@ import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) import NavBar from '../components/NavBar' export default function Modal() { - const [school, setUser] = useState([]); + const [school, setUser] = useState([]); const fetchData = async () => { const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published"); const data = await response.json(); diff --git a/src/pages/test/2.jsx b/src/pages/test/2.jsx new file mode 100644 index 0000000..16af225 --- /dev/null +++ b/src/pages/test/2.jsx @@ -0,0 +1,36 @@ +export default function PageWithJSbasedForm() { + const handleSubmit = async (event) => { + event.preventDefault() + const data = { + "status":"published", + name: event.target.schoolName.value, + country: event.target.country.value, + + } + const JSONdata = JSON.stringify(data) + const endpoint = 'https://management.beanstalkedu.com/items/school' + const options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSONdata, + } + const response = await fetch(endpoint, options) + + const result = await response.json() + alert(`Is this your full name: ${result.data}`) + } + return ( +
+ + + + + + + +
+ ) + } + \ No newline at end of file