Sep 16, 2024
0
Level 1
why is submit function of this form not running?
Hi guys, I'm using Laravel with Inertia and this is the default register page that comes with it, when submitting the form the register page gets fetched again and console.log doesn't go through although I have preventDefault set, what am I missing here?
export default function Register() {
const { data, setData, post, processing, errors, reset } = useForm({
name: '',
email: '',
password: '',
password_confirmation: '',
});
useEffect(() => {
return () => {
reset('password', 'password_confirmation');
};
}, []);
const submit = (e) => {
e.preventDefault();
console.log('hello')
};
return (
<GuestLayout>
<Head title="Register" />
<form onSubmit={(e) => submit(e)}>
<div>
<InputLabel htmlFor="name" value="Name" />
<TextInput
id="name"
name="name"
value={data.name}
className="mt-1 block w-full"
autoComplete="name"
isFocused={true}
onChange={(e) => setData('name', e.target.value)}
required
/>
<InputError message={errors.name} className="mt-2" />
</div>
<div className="mt-4">
<InputLabel htmlFor="email" value="Email" />
<TextInput
id="email"
type="email"
name="email"
value={data.email}
className="mt-1 block w-full"
autoComplete="username"
onChange={(e) => setData('email', e.target.value)}
required
/>
<InputError message={errors.email} className="mt-2" />
</div>
<div className="mt-4">
<InputLabel htmlFor="password" value="Password" />
<TextInput
id="password"
type="password"
name="password"
value={data.password}
className="mt-1 block w-full"
autoComplete="new-password"
onChange={(e) => setData('password', e.target.value)}
required
/>
<InputError message={errors.password} className="mt-2" />
</div>
<div className="mt-4">
<InputLabel htmlFor="password_confirmation" value="Confirm Password" />
<TextInput
id="password_confirmation"
type="password"
name="password_confirmation"
value={data.password_confirmation}
className="mt-1 block w-full"
autoComplete="new-password"
onChange={(e) => setData('password_confirmation', e.target.value)}
required
/>
<InputError message={errors.password_confirmation} className="mt-2" />
</div>
<div className="flex items-center justify-end mt-4">
<Link
href={route('login')}
className="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Already registered?
</Link>
<PrimaryButton type='submit' className="ms-4" disabled={processing}>
Register
</PrimaryButton>
</div>
</form>
</GuestLayout>
);
}
Please or to participate in this conversation.