How to add a confirm dialog to a submit button ?
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 last edited by
@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
- Do you have multiple
formactions ? If not, better to put the action attribute directly on the form tag.
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
@submitis 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
beets last edited by
@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
@submitaction, 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.