Search code examples
javascriptform-submitdispatcheventaurelia

Programmatically submit Aurelia form that uses submit.delegate=save()

I have a form which (obviously) has a submit.delegate attribute pointing to my VM's save() method.

I'm now building a separate custom attribute from where I'd like to programmatically be able to submit any form.

Basically this: <form submit.delegate="save()" custom-attribute-here>

And then inside my custom attribute's JS class I'd like to be able to: this.el.submit() in which case the form's submit.delegate method should be called.

I first tried with this.el.submit() which didn't work in either Chrome or Firefox, but using this.el.dispatchEvent(new Event('submit', {bubbles: true})) actually does work in Chrome. Firefox still submits the form "normally" and ignores the method in the submit.delegate attribute.

Is there a solution to this problem that works in all browsers?

Solution

  • While not ideal, triggering the [type=submit] element's click event works:

    this.form.querySelector('[type=submit]').click()