Preventing double submission of data is a thoroughly basic feature for any UI library. It should be easy and obvious. But for HTML forms, the properly accessible solution shown here involves a non-intuitive combination of JavaScript, CSS and custom data attributes on an element.
The author's suggestion of using a data attribute instead of adding a disabled class to the element and the styling of it is more of preference thing.
That said, I don't really understand why there isn't something like a "singleSubmit" attribute you can add to a HTML form to automatically disable duplicate submissions. Handling double form submits is a frequent problem – you almost never want a form to be immediately resubmitable which HTML forms are.
The first reaction is always defensive, "HTML isn't designed for this!" — and two paragraphs later it's: "HTML should really do this though".
To defend my suggestion of a "singleSubmit" attribute – I think the form element itself which already has the ability to do some basic dynamic stuff like submit a form in various ways could reasonably include the basic requirement of not allowing said form to be submitted twice. Personally this isn't something I think is a huge issue because most of the time when we'd want to do this we're looking to build fancy dynamic form behaviour anyway and in those cases JS is going to be what you need to use for that. But there are some simple webpages out there which don't care about any of that fancy stuff and literally just want a form on a page which POSTs data to another page, and in those cases it would be nice to have the "singleSubmit" attribute I suggested.
A much better behavior would be to have the form handle the button state automatically: once you submit the form, all submit buttons of the form are disabled until the completion the button's onclick handler, the form's onsubmit handler, and any request triggered by the form action. Once all of these are done, all submit buttons belonging to this form are automatically enabled again.
If you want to get fancy, HTML could have introduced a fifth button state for this to make it distinct from a "normal" disabled button, and maybe allowed the form to change the button content for that state (you might want the button to say "please wait" or "loading"). But really, just simple sane handling of the disabled state would have been so much better than the barebones forms we have. Make it overridable by an attribute if you really want to support the edge case of a form having intentional concurrent submissions.
I assume because submitting a form takes you to a different page, where the form no longer exists.
There needs to be two kinds of forms, one that asks if you really want to re-submit, and another that allows infinite submission. The backend should handle the problem too, but this would go a long way toward a better default UX.
addEventListener has a 'once' option that will only fire the event once. If you're willing to handle all the error cases, it seems like the easiest option.
Either way you'd need to validate the input in the server side anyway. What are you going to do if the user (agent) misbehaves? Reddit frequently has this problem with comments popping up lots of times because of a shaky connection, and frankly I dislike letting data quality rely on your users behaving as you expect.
Not that great of an experience when you sit there and "nothing happens".