How to use transition with form being summited from js

[JakovGlavac]

Hi, I'm trying to submit form from JS.
I have a modal that is not created inside Form.

I managed to submit form using ref and js:

<Form method="post" ref={solvingForm}>

<Button
  onClick={() => {
    solvingForm.current.submit();
  }}
>
  Da
</Button>;

But the problem is that on submit transition.submission is not true, and the whole page refreshes.

localhost_3000_question_ckxwk64h80258vovcz7gyo65o.-.Brave.2022-01-03.00-48-11.mp4

Is there a way to fix this?

[sairajchouhan]

The submit you are using solvingForm.current.submit() is HTML form submission even though you are using remix Form because you are accessing it from a ref

To submit a remix Form programmatically use useSubmit hook

import { useSubmit } from 'remix'

export default function Component(){
  const submit = useSubmit()

    return (
      <Form method="post">
        <Button
          onClick={() => {
            submit(solvingForm.current, {
             method: 'post',
             action: '/route-you-want-to-post'
            })
          }}
        >
          Da
       </Button>;
    </Form>
  )
}

Then you can access all the properties from useTransition hook and transition.submit will also be true

[JakovGlavac]

Yeah this is cool, but how to make it work outside of <Form> ?

[sergiodxa]

The simpler way is to put an ID to the Form and then add a form attribute to the button element with the ID of the form. That will tell the browser the form of that button is your other form and when you click it (if type is submit) it will submit the form.

This way you don’t need to grab a ref or use the useSubmit hook, also it will work even without JS.

[sergiodxa]

Btw this is the attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-form

[sairajchouhan]

Wow that's very helpful, thanks @sergiodxa