Are AC flows compatible with form submits?

@George @Teodor

Can I run a flow on submit and then POST(needs to be a POST) the request to SC from the same flow?
It’s driving me crazy and I see this use case as a pretty basic one for flows and forms :slight_smile:
I’ve tried several combinations and haven’t managed to do it.

I want to achieve this.

$('#myform').submit(function() {
    return myflow.run()
    });

...

//flow run function
function run() {
  if (condition)
   return true //submit form
  else
   return false //cancel submit
}

Maybe @patrick can help here more :slight_smile:

1 Like

Pretty sure you guys have this insider game where you always mention the one who wasn’t! :joy:

Haha yes, i was the first to mention Patrick so i get some extra points :joy: :rofl:

1 Like

That won’t work that way, flows are async and uses promises. To use a flow in a form submit you should prevent the submit event and then at the end of the flow you call the submit method of the form (this should not trigger the submit event again).

So something in these terms?

$('#myform').on('submit', function (e) {
    e.preventDefault();
    myflow.run()
});

//flow run function
function run() {
  if (condition)
  $('#myform').submit()
  else
   return false
}

And if so is using dmx-on:submit.prevent the right approach?

I tried the AC implementation of prevent and also I used vanilla js as below

dmx-on:submit.prevent="run({run:{action:`resetpasswordform.submit()`}})"
...onsubmit="event.preventDefault();" 
dmx-on:submit="run({run:{action:`resetpasswordform.submit()`}})">

Both will basically go into a loop and freeze browser which is kind of what I was expecting to happen.

If I call a normal(not inline) flow it will basically do nothing as AC catches the recursion before.

dmx-on:submit.prevent="flow1.run()

image

And this will end up in an error too.

image

I just saw this beautiful thingy :slight_smile:

image

I will report back.

1 Like

So yes I confirm that if you want to submit a form from a flow you need to use:

  1. Dynamic event -> Form -> Submit
  2. Modifier: prevent
  3. Run the flow
  4. Call the form submit action from the flow
  5. Mark the “Direct” checkbox in the form submit action properties.
3 Likes