use modal in form action?

[stimw]

Hi there,

If I want to submit through the form's action and display a confirmation modal before submitting, do I have to hide the button and then use useRef like this:

<button type="submit" style={{ display: 'none' }} id="hiddenSubmit"></button>

and

formRef.current.submit();

or there's some easier approaches?

[edmundhung]

You can put a submit button in the model and use the form attribute to associate it with the form, e.g.

// In the component
const [form,fields] = useForm();

// In the dialog
<button form={form.id}>Confirm</button>

If it is hard to pass the id down, you can always hard code it as long as it is unique.

// In the component
const [form,fields] = useForm({
  id: 'example',
});

// In the dialog
<button form="example">Confirm</button>

[stimw]

looks good to me, thank you