Interestingly I've not had to tackle this one before. One solution is: we can attach a global listener to the 'submit' event and prevent all form submissions before DOM ready, using event.preventDefault(). What do you think?

Problems with that:
1) We need to do non-deferred load on some JS again, somewhat defeating the point (we'd need to add a server hop or inline JS which'd be messy). A server hop is comparable in badness to just loading global.js, as it's about the latency more than the bandwidth.
2) To do it well we'd need to give UI feedback, or to reinject the event later somehow, meaning even more overhead, just for this corner case.

What if we change action="..." to action="#" data-jsready-action="..." for all JS-controlled forms? Obviously we then do a switcheroo once JS has loaded.

Well, we'd need to switcheroo method="post" too.

Actually I am now wondering what would happen if we did method="js", would browsers not submit the form? I guess they'd remap to post.

Actually my solution doesn't given any UI feedback either.

Maybe we could do the non-JS action to something like...

"javascript: window.alert('Page still loading');"

>We need to do non-deferred load on some JS again
Sorry I forgot to mention, we already preventDefault() for <a>'s and <form>'s with [href="#!"] and [action="#!"] in dom_init.js, which is loaded early synchronously to keep track of dependencies and provide $dom.ready/load.then() early for those who still want to use inline script tags. We can add to it, we can add the alert message there too.

>Actually I am now wondering what would happen if we did method="js"
I think it would do an HTTP 'JS' request instead of GET or POST.

The switcheroo method seems like a good idea but might be a bit intrusive and potentially break third party forms/code somehow (Edit: If we set the data attributes using JS). Thoughts?

Okay, so looking at this case, the problem is those Comcode editor buttons are within the main add/edit form, hence why your "#!" solution isn't working.

"The switcheroo method seems like a good idea but might be a bit intrusive and potentially break third party forms/code somehow. Thoughts?"

We'd only do it if data-jsready-action was there (or whatever you called it).

So perhaps we combine what you already do, with my suggestions...

<form action="#!" data-jsready-action="..." ...>

Your dom_init.js code would inject the window.alert's for the above case only.

Your full JS lib would then do the switcheroo when it loads.

(I'm assuming your existing solution removes the need to set a non-POST method)


So here we are solving 3 problems:
1) Forms submitting prior to JS checks
2) Lack of UI feedback on some forms prior to JS loading fully
3) Fixing the specific bug reported here

I have fixed the form submission issue using the preventDefault() method and showing an alert message.