How to add a confirm dialog to a submit button ?

[NPi2Loup]

We are trying to add a confirm dialog to a submit button
We try to mixing :

• form submission button with formaction (we have multiple buttons per form and no Ajax) (https://quasar.dev/vue-components/button#Controlling-the-button-for-form-submission)
• confirm dialog on button click (https://quasar.dev/vue-components/dialog#Basic)

We can’t make it work the way we want :
if button is type=“submit”, the confirm won’t stop the submit event
if button isn’t type=“submit”, how to submit the form with the formaction’s button attribute ?

We try to add some DX too, because we will use this in multiple buttons and multiple cases.

Here the codepen : https://codepen.io/npi2loup/pen/gOwJbVG

Thanks for your help

[beets]

@npi2loup Something like this works, but is a bit hacky: https://codepen.io/pianopronto/pen/GRjaqvL?editors=1111

If I knew more about what you intend to do, I could give a better answer:

• Is the form always submitted through ajax?
• Instead of @submit.prevent="simulateSubmit", do you have some other method you can just call on the onOk callback?
• Do you have multiple formactions ? If not, better to put the action attribute directly on the form tag.

[NPi2Loup]

Thanks for your example, I will look at that. I didn’t think about the @click.prevent, it’s a great idea.
Did you think we could “keep” the event and reemit it to parent only onOk callback ?
(We are trying to not set a ref nor id on form, if possible)
(We made it to work, with a formId on “ok” button : https://codepen.io/npi2loup/pen/gOwJbVG)

And to answer your questions :

• No, our forms isn’t submitted through ajax, we just use standard button submitting
• the @submit is just for test purpose, in true page the form submit to the formaction url of buttons (a post request to server)
• Yes, we have multiple formaction per form

[beets]

@npi2loup Since you’re just using a standard form action instead of ajax, it can be simplified a bit: https://codepen.io/pianopronto/pen/ExgzWYp?editors=1111

I removed the @submit action, and the hidden button. Also put in multiple formactions.

I don’t see a way around the one reference. I’m not sure what the reasoning against using a ref is, I use them quite a bit in my codebases.