formSubmit
parent
0dd4c47f37
commit
52e0800ce7
|
|
@ -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 (
|
||||
<main>
|
||||
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 (
|
||||
<main>
|
||||
<div>
|
||||
<NavBar />
|
||||
<section className='container mx-auto px-4 my-16 lg:px-28 xl:px-56 2xl:px-96'>
|
||||
|
|
@ -43,18 +36,18 @@ const inter = Inter({ subsets: ['latin'] })
|
|||
<svg className='rounded-full shadow-2xl' fill="#FE4501" width="100px" height="100px" viewBox="-9.6 -9.6 51.20 51.20" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>school</title> <path d="M30 21.25h-6.25v-8.957l5.877 3.358c0.107 0.062 0.236 0.098 0.373 0.099h0c0.414-0.001 0.749-0.336 0.749-0.751 0-0.277-0.15-0.519-0.373-0.649l-0.004-0.002-13.623-7.784v-0.552c0.172 0.016 0.35 0.068 0.519 0.068 0.004 0 0.010 0 0.015 0 0.475 0 0.934-0.067 1.368-0.193l-0.035 0.009c0.323-0.063 0.693-0.099 1.073-0.099 0.392 0 0.775 0.039 1.146 0.112l-0.037-0.006c0.039 0.007 0.083 0.012 0.129 0.012 0.184 0 0.352-0.068 0.479-0.181l-0.001 0.001c0.161-0.139 0.263-0.343 0.264-0.571v-2.812c0 0 0-0 0-0 0-0.355-0.247-0.653-0.579-0.73l-0.005-0.001c-0.419-0.111-0.9-0.176-1.396-0.176-0.5 0-0.985 0.065-1.446 0.187l0.039-0.009c-0.288 0.067-0.618 0.105-0.958 0.105-0.231 0-0.457-0.018-0.678-0.052l0.025 0.003c-0.122-0.256-0.378-0.43-0.676-0.43-0.412 0-0.746 0.334-0.746 0.746 0 0.001 0 0.003 0 0.004v-0 4.565l-13.622 7.784c-0.227 0.132-0.378 0.374-0.378 0.651 0 0.414 0.336 0.75 0.75 0.75 0.137 0 0.265-0.037 0.376-0.101l-0.004 0.002 5.878-3.359v8.957h-6.25c-0.414 0-0.75 0.336-0.75 0.75v0 8c0 0.414 0.336 0.75 0.75 0.75h28c0.414-0 0.75-0.336 0.75-0.75v0-8c-0-0.414-0.336-0.75-0.75-0.75v0zM18.658 3.075c0.298-0.082 0.64-0.13 0.993-0.13 0.183 0 0.363 0.013 0.539 0.037l-0.020-0.002v1.339c-0.16-0.013-0.345-0.021-0.533-0.021-0.489 0-0.966 0.052-1.425 0.151l0.044-0.008c-0.304 0.088-0.653 0.139-1.014 0.139-0.174 0-0.344-0.012-0.512-0.034l0.020 0.002v-1.323c0.15 0.014 0.325 0.021 0.502 0.021 0.499 0 0.984-0.062 1.447-0.18l-0.041 0.009zM2.75 22.75h5.5v6.5h-5.5zM9.75 22v-10.564l6.25-3.571 6.25 3.572v17.814h-2.5v-5.25c-0-0.414-0.336-0.75-0.75-0.75h-6c-0.414 0-0.75 0.336-0.75 0.75v0 5.25h-2.5zM13.75 29.25v-4.5h4.5v4.5zM29.25 29.25h-5.5v-6.5h5.5zM16 19.75c2.071 0 3.75-1.679 3.75-3.75s-1.679-3.75-3.75-3.75c-2.071 0-3.75 1.679-3.75 3.75v0c0.002 2.070 1.68 3.748 3.75 3.75h0zM16 13.75c1.243 0 2.25 1.007 2.25 2.25s-1.007 2.25-2.25 2.25c-1.243 0-2.25-1.007-2.25-2.25v0c0.002-1.242 1.008-2.248 2.25-2.25h0z"></path> </g></svg>
|
||||
<p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>School Registration Form</p>
|
||||
</div>
|
||||
<form onSubmit={handleFormsubmit} action="" className='w-full px-6 md:px-20'>
|
||||
<form onSubmit={handleSubmit} className='w-full px-6 md:px-20'>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="school" className='text-xl font-bold'>School Name</label>
|
||||
<input value={formvalue.school} onChange={handleInput} type="text" name="school" id="school" placeholder='School Name' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
<input type="text" name="schoolName" placeholder='School Name' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="country" className='text-xl font-bold'>Country</label>
|
||||
<input value={formvalue.country} onChange={handleInput} type="text" name="country" id="country" placeholder='Country' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
<input type="text" name="country" placeholder='Country' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="anual" className='text-xl font-bold'>Anual</label>
|
||||
<select value={formvalue.anual} onChange={handleInput} name="anual" id="anual" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<select name="anual" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" selected>-Select-</option>
|
||||
<option value="January">January</option>
|
||||
<option value="February">February</option>
|
||||
|
|
@ -72,7 +65,7 @@ const inter = Inter({ subsets: ['latin'] })
|
|||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
|
||||
<select value={formvalue.toddlers} onChange={handleInput} name="toddlers" id="toddlers" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<select name="toddlers" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" selected>-Select-</option>
|
||||
<option value="January">January</option>
|
||||
<option value="February">February</option>
|
||||
|
|
@ -90,7 +83,7 @@ const inter = Inter({ subsets: ['latin'] })
|
|||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="early_start_program" className='text-xl font-bold'>Early Start Program</label>
|
||||
<select value={formvalue.early_start_program} onChange={handleInput} name="early_start_program" id="early_start_program" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<select name="early_start_program" id="early_start_program" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" selected>-Select-</option>
|
||||
<option value="January">January</option>
|
||||
<option value="February">February</option>
|
||||
|
|
@ -108,7 +101,7 @@ const inter = Inter({ subsets: ['latin'] })
|
|||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
|
||||
<select value={formvalue.interakto} onChange={handleInput} name="interakto" id="interakto" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<select name="interakto" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" selected>-Select-</option>
|
||||
<option value="na">N/A</option>
|
||||
<option value="January"> January</option>
|
||||
|
|
@ -125,7 +118,7 @@ const inter = Inter({ subsets: ['latin'] })
|
|||
</select>
|
||||
</div>
|
||||
<div className='flex justify-center pt-8'>
|
||||
<button className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer'>Submit Now</button>
|
||||
<button type='submit' className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer'>Submit Now</button>
|
||||
{/* <input type="submit" value="Submit Now" className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer' /> */}
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -133,6 +126,6 @@ const inter = Inter({ subsets: ['latin'] })
|
|||
</section>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
export default Postformvalue;
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -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<any[]>([]);
|
||||
const fetchData = async () => {
|
||||
const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published");
|
||||
const data = await response.json();
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<label >School Name</label>
|
||||
<input type="text" name="schoolName" required />
|
||||
|
||||
<label htmlFor="last">Country</label>
|
||||
<input type="text" id="last" name="country" required />
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue