Form actions with modals

[H0R5E]

Hi, I was wondering if it was possible to use form actions with a modal form?

I tried using a named action on the submit button of the form (formaction="?/updateUser"), but the action defined in my +page.server.ts file (for the page where the modal is triggered) is never called.

I'll probably revert to calling the action manually, as suggested here, but I was wondering if anyway had any insight as to what is happening?

Many thanks,

Mat

[Sarenor]

Usually, we recommend to try to stay away from modals and if you do have to use them, to use them with exact paths, so <form action="/path/to/your/+page.server.ts?/updateUser">.

If that doesn't work either, we'll need to come up with a reproduction for easier debugging.

[H0R5E]

Hi @Sarenor, thanks for the quick reply!

Usually, we recommend to try to stay away from modals

Oh, that's not super clear from the docs. I've used a lot of them! You'd recommend using a separate page for every form, instead?

use them with exact paths, so

So, after trying your recommended fix, I realised I had made a silly error. The buttons in the example form are inside the footer tags, which are outside of the form, so of course they didn't trigger the form actions...

OLD:

...
</form>
<footer class="modal-footer {parent.regionFooter}">
  <button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>{parent.buttonTextCancel}</button>
  <button class="btn {parent.buttonPositive}">Update</button>
</footer>

NEW:

...
  <footer class="modal-footer {parent.regionFooter}">
    <button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>{parent.buttonTextCancel}</button>
    <button class="btn {parent.buttonPositive}">Update</button>
  </footer>
</form>

After fixing this, I was still having issues getting your suggested fix to work. In the end, I needed to omit the +page.server.ts from the path. So, setting the action like so: <form action="/path/to/your/page?/updateUser">. Perhaps that's what you were suggesting, but I took it literally!

Thanks for putting me on the right track,

Mat

[Sarenor]

Yeah that's what I meant, sorry for being to literal. I should have omitted the +page.
Glad you got it working!

And it's not really explained in the docs but it's our general suggestion to not make to much use of modals, especially not for interactive stuff with lots of values. It's just safer and easier to navigate to dedicated pages than to a modal.