One approach is to first test if form.submit is a submit button and if it is, programmatically click it:
// Probably need better testing for whether it's a button or input or whatever
// this is just a proof of concept
if (form.submit && typeof form.submit.tagName == 'string' && form.submit.click) {
form.submit.click();
} else {
form.submit();
}
This appears to work in IE at least, however you'll need to test widely to determine support in other browsers. You may need to dispatch a click event on the button (using both IE and W3C models for dispatching events), or use other methods for those that don't support the click method.
Another approach is to add a submit button and click it:
<form id="f0">
<input name="foo" value="foo">
<input type="submit" name="submit">
</form>
<button onclick="
var form = document.forms.f0;
var button = document.createElement('input');
button.type = 'submit';
button.value = 'submit button';
form.appendChild(button);
button.click();
">Add submit button and click it</button>
Users should never see the button as browsers generally wont update the UI until a function has finished. By that time the form should have been submitted, so again no UI update.
This should also cause a submit event to be dispatched, so submit listeners should be called. It may be best to give the button a style of display:none just in case the submit is cancelled—you don't want the button to appear.
Also need to check for the extra button in case it has already been added.