How to use action in onSubmit

[thecodeclimber]

I have a form that I want to submit to ActiveCampaign. If I was just making a regular html site, this is how the form element would look: <form method="POST" action="https://uniqueid.activehosted.com/proc.php">

I am wondering, how can I recreate that functionality using react hook form?

In other words, this is how my form looks right now:

const { register, handleSubmit, errors } = useForm({
  validationSchema: Yup.object({...}),
})

const onSubmit = (data) => console.log(data)

<form onSubmit={handleSubmit(onSubmit)}>

I assume that somehow or other I need to place the action and method inside the onSubmit function. The thing is, I have no idea how to do that.

Any suggestions?

Thanks.

[bluebill1049]

you can use fetch inside the onSubmit and do a post to your end point.

[bluebill1049]

pretty much an example like this: https://codesandbox.io/s/kw7z2q2n15 but doing the fetch inside the submit function

[thecodeclimber]

That's pretty much what I did. Would you mind taking a look and letting me know if I did something wrong: https://codesandbox.io/s/react-hook-form-get-started-forked-hh9zi?file=/src/my-form.js

Also, I did notice in some tutorials (not related to react-hooks-form) that they did something like the following:

    const data = new FormData(event.target);

    fetch('https://youareawesome.activehosted.com/proc.php', {
      method: 'POST',
      body: data,
      mode: 'no-cors',
    })

I tried something similar with react-hook-forms but it didn't work. Is it possible to use FormData in the onSubmit function?

[bluebill1049]

looks right to me, the quesiton is probably going to be your end point.

[hackerunet]

ok but what if the endpoint is inside a helper function with process.env variables? process.env will be undefined, how can we use handleSubmit in the scenario that you are sending a request from a helper function using env variables?

[hackerunet]

so, what I did was actually to extract the env variables via loader to my handleSubmit function and pass the proxyUrl, that worked, however not sure if this is the wrong thing to do, I'm building an app from scratch using react and I have never created anything on it.. There should be a way to preload certain variables to the FE... I have read about it but seems to not be working, I'm using Remix

[mwritter]

I ran into this issue as well trying to reach out to a SalesForce endpoint, and I had to use the native form action, using fetch was not an option. Using Next JS (React) heres the solution that worked for me.

const Form = () => {
    const formRef = useRef<HTMLFormElement>(null)
    const { handleSubmit } = useForm()
    const onSubmit = () => formRef.current?.submit()

    return (
        <form
            ref={formRef}
            onSubmit={handleSubmit(onSubmit)}
            action="https://the-url-you-wanna-use.com"
            method="POST">
                ...
        </form>
    )
}