Web Development

HTML5 One Time Submit

One of HTML5’s coolest features in my opinion is that forms are easier to build. Things like required, autocomplete, pattern make it much easier to create an intuitive form without having to jump through hoops and repeating efforts to do some basic form validation.

The one thing that I still see as missing is a one-time submit button. Many sites create transactions that should only be performed once. For example, when you click “place order”, you definitely don’t want your transaction being processed multiple times, so what websites do is disable the button after the first click. I’m not sure why, but this little pattern never quite made it into HTML5. I’d love to see something like this:

<input type="submit" id="process_order" transactionsafe="true"/>

Then when the submit button is pressed, it automatically sets the disabled attribute. Either on the server side (if you submit the entire page), or via JS (for a refresh-less UX) you could unset the disabled property should you want the user to be able to submit again (for example if the order failed).

It’s trivial, but we seem to use this pattern quite a bit. It would be nice to one day be able to do this without an event.

Leave a Reply

Your email address will not be published. Required fields are marked *