Trigger form submission with use:enhance from Modal

[jorgnyg]

Any way to submit a form from the Modal component, probably the on:submit event, while using enhance?
Snippets below illustrates my current workaround. Doesn't look nice, but hope it illustrates what I want to achieve (getting rid of the document.getElementById...)

const handleSubmit = () => {
      return async ({ result }) => {
         if (result.type === 'success') {
          open = false;
        }
      };
 };

...

<form 
    id="delete_project_form"
    method="POST"
    action="?/delete_project"
    use:enhance={handleSubmit}
  >
    <Modal
      ...
      bind:open
      on:submit={()=> document.getElementById("delete_project_submit").click()} 
    >
      <p style="color: white;">This is a permanent action and cannot be undone.</p>
      <input type="hidden" id="project_id" name="project_id" value={projectId} />
      <button hidden id="delete_project_submit" type="submit" />
    </Modal>
  </form>

[gschurck]

I have the same issue when using Superforms in SPA mode with Carbon.
Do you have a better solution @theetrain ?
Maybe allowing to set the type of the modal buttons could help ?

[theetrain]

Hello, this can be achieved by providing a custom handler to use:enhance to handle cleanup, and have the modal call formElement.requestSubmit():

<script>
  /* import statements here */

  let formElement;

  const formHandler = () => {
    console.log('form submitted');
    return async ({ update }) => {
      await update();
      open = false;
      await tick();
      notificationWrapper.focus();
    };
  };
</script>

<Modal
  hasForm
  on:click:button--primary={() => formElement.requestSubmit()}
  on:click:button--secondary={() => (open = false)}
  bind:open
  modalHeading="Form example"
  primaryButtonText="Submit"
  secondaryButtonText="Cancel"

  <!-- this is `true` by default, we want to prevent submit on 'cancel' -->
  shouldSubmitOnEnter={false}
>
  <form method="POST" bind:this={formElement} use:enhance={formHandler}>
    <TextInput name="name" labelText="Your name" />
  </form>
</Modal>

Note, submitting the form requires JS at this time. More enhancements will be explored in #310 and #1622.

Demo: https://www.sveltelab.dev/z8mq7xsqiklnr8f

Note, the demo doesn't include loading indicators, which I recommend adding.

[gschurck]

Thank you for your solution.
However as I am using Superforms in SPA mode, I have to submit the form in an event (to get the clean validated data) :

onUpdate({ form }) {
  // Form validation
  if (form.valid) {
    // TODO: Do something with the validated form.data
    setMessage(form, 'Valid data!');
  }
}

But the onUpdate event of Superforms is not triggered when I click on the primary button of the Carbon modal, I don't know why (even if the modal is put inside the form). So I will still use the button click workaround for now.