In 2009 I was working as a frontend engineer for an e-commerce agency and received this bug:

The bug said:

This problem is much harder than it sounds so let me break it down:

Forms have two types of submission:

• Explicit submission
• Implicit submission

Explicit submission is when you click the submit button.

Implicit submission is when you press ENTER when an input is focused.

When a form has one submit button, there’s no difference between explicit and implicit submission:

You either click the button to submit the form. Or you press ENTER to submit the form. Both result in the ‘Continue’ action being performed.

But what happens when you have two buttons:

I didn’t know at the time so I ran some tests and found out that:

Browsers submit the form as if you clicked the first button.

So no matter what input has focus, pressing ENTER will submit the form as if you clicked ‘Find address’.

Root cause found!

To solve this, you need to add another ‘Continue’ button to the top of the form:

But showing a duplicate button at the top of the form isn’t ideal, isn’t conventional and didn’t match the original design.

Here’s how I solved it (get ready to be impressed):

Step #1: Visually hiding the ‘Continue’ button

I used CSS to hide the button off screen:

​
​.visually-hidden {
border: 0!important;
clip: rect(0 0 0 0)!important;
height: 1px!important;
margin: -1px!important;
overflow: hidden!important;
padding: 0!important;
position: absolute!important;
width: 1px!important;
}​
​

This way the button is hidden from users but still picked up by the browser when the form is submitted.

Step #2: Making the ‘Continue’ button non-focusable

Even though the button was off-screen, when you tab into the ‘First name’ input the interface would appear broken.

This is because the off-screen button received focus.

To fix this I added tabindex="-1" to make it non-focusable:

That worked perfectly except for when the postcode input received focused:

This is because it performs the ‘Continue’ action when it should perform the ‘Find address’ action.

Here’s my really clever solution:

Step 3: Performing the postcode search when the postcode input is focused

To do this I used JavaScript to add another visually hidden ‘Find address’ button to the top - but only when the postcode input received focus:

And then when the postcode input loses focus, the JavaScript removes the button:

Impressive right?

Well not really:

1. The fix took a lot of time to solve
2. More code gets sent to the browser (increasing load time and cost)
3. It relies on JavaScript - without it, basic form functionality is lost

You gotta remember that:

The task was not to overcome the way browsers handle implicit submission when there are multiple buttons.

The task was to help users enter their details.

And multiple submit buttons makes that harder. Because users then have to use the right button, in the right order, at the right time.

Instead redesign the interaction so that you don’t need multiple submit buttons:

It’s not clever, but it is.

My course, Form Design Mastery is full to the brim of ‘not clever, but clever’ solutions. Here’s a link in case you’re interested:

​https://formdesignmastery.com​

Cheers,
Adam