quick rose
I have a page, that already has a Form and submit in it.
I want to have a button outside of that form, that submits a form on another page. (I.e., email authentication, send the code again submits a Fetch request to our backend to send another email verification token)
I tried using useFetcher for this, but the button inside fetcher.Form is just submitting the <Form> that submits my email code.
upper bane
could you share more code?
quick rose
function Footer() {
return (
<fetcher.Form method="post" action="/auth/resendemailcode/action">
<button type="submit">sResend email code</button>
</fetcher.Form>
);
}
<Form method="post" action="/auth/emailcode/">
<Input disabled={isLoading} type="text" label="Email Code" name="emailcode" errorLabel={emailCodeError} />
<Continue /> // this is a button to submit
</Form>
<Footer />
resendemailcode.action
export const action: ActionFunction = async ({ request }) => {
const sessionIdSession = await sessionIdSessionStorage.getSession(request.headers.get("Cookie"));
sessionIdSession.flash("resendEmailCodeSuccess", "Success email resent!");
throw redirect("/auth/emailcode", {
headers: {
"Set-Cookie": await sessionIdSessionStorage.commitSession(sessionIdSession),
},
});
};
Just set's a cookie to view on the emailcode page and redirects back to it after setting
but the idea would be, in resendemailcode.action I'd do my fetch/POST to my backend, and redirect appropriately
I'm assuming there may be a better way to do all this
upper bane
so the fetcher.Form is not being submitted when you click on Resend email code and instead the Form is being submitted?
upper bane
are you 100% sure in your actual code the forms are not nested, right?
quick rose
Oh, it did run lol.
upper bane
you can check that is Form the one being submitted by checking if useTransition() change