Interrupt Form Submission for Confirmation Prompt

[mgruhn]

I'm trying to interrupt a form submission using the use:enhance directive so I can display a "Are you sure you want to do this?"-style dialog to the user. Has anyone done this before/have thoughts on the best way to approach it? Here's what I have so far:

<form bind:this={formDOM} method="POST" use:enhance={({ cancel }) => {
  $processing = true
  if (!$confirmed) {
    cancel()
    showDialog({
      cancel: () => ($processing = false),
      confirm: () => {
        $confirmed = true
        formDOM.submit()
      }
    })
    return
  }
  
  $confirmed = false
  return async({update}) => {
    update()
    $processing = false
  }
}}>
...
</form>

The idea is that I'm tracking a flag (confirmed) to indicate whether the user has already responded to the dialog. If they haven't, I call cancel, display the dialog, and have the dialog resubmit the form with confirmed set to true. showDialog displays the dialog and calls either the cancel or confirm callback passed to it, depending on which action the user takes.

The problem I'm having is that the cancel callback passed in by enhance doesn't seem to do anything. The form proceeds with the submission no matter what. I've event tried stripping this way to down so that the enhance callback does literally nothing but call cancel, just to see if it was working, and the form still submits.

I'm not sure if I'm doing something wrong, or cancel is just broken. But this page certainly seems to suggest that cancel should halt any further processing of the submission. Is that not correct?

[mgruhn]

In case anyone comes across this, I figured this out myself. Unrelated to any of this code, the form was submitting via a call to formDOM.submit() instead of formDOM.dispatchEvent(new Event('submit')). So the browser default form action was submitting, regardless of what enhance wanted to do.

[geoffrich]

You can also try using form.requestSubmit to submit the form.