How do I run some code when a specific form's submission is successful?

[panda-madness]

Hello!
My use case is the following:
I want to reset a form after a submission, but only in the case when the submission is successful, otherwise I want to do nothing. What would be an idiomatic way of achieving that in Unpoly? up:form:submit emits on form submission start, so that doesn't help. I wanted to try something like the following:

up.on(
    'up:form:submit',
    'form.my-form',
    /**
     * @param {Event} event
     * @param {HTMLFormElement} $el
     */
    function (event, $el) {
        // do something
        $el.addEventListener('up:fragment:loaded', () => {
            $el.reset();
        }, { once: true });
    }
);

...but, unfortunately, the up:fragment:loaded emits on the layer and not on the the form.

[adam12]

I'm assuming you're not returning an empty form upon successful submission?

You can modify the render options to provide an onFinished callback.

up.on('up:form:submit', (event, el) => {
  const form = el.form
  event.renderOptions.onFinished = () => {
    form.reset()
  }
})

[panda-madness]

This is exactly what I needed! Thank you. Yet another reminder to RTFM.

The form in question targets another part of the page, hence does not re-render together with it's target. I set it up this way because the form is a bit complex and takes a couple of SQL queries to render, so I was trying to avoid all that work just to reset the form that's already there.