This content originally appeared on Adam Silver and was authored by Adam Silver
In 2009 I was working as a frontend engineer for an e-commerce agency and received this bug:
The bug said:
Pressing Enter when the ‘Town’ input is focused performs a postcode search
Pressing Enter should only perform a postcode search when the postcode input is focused.
This problem is harder than it sounds so let me break it down:
Forms have two types of submission:
- Explicit submission: when you click the submit button
- Implicit submission: 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 press Enter while focused on an input when the form has multiple submit 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:
<input tabindex=”-1” type=”submit” value=”Continue” name=“Continue”>
Great - except for when the postcode input is 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 as follows:
When the postcode input is focused, add another visually hidden ‘Find address’ button to the top:
And then when the postcode input loses focus, remove the button:
Impressive right?
Well not really:
- The fix took a lot of time to solve
- More code gets sent to the browser (increasing load time and cost)
- 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 give 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:
This content originally appeared on Adam Silver and was authored by Adam Silver
Adam Silver | Sciencx (2025-01-26T00:00:00+00:00) My clever solution for handling multiple submit buttons. Retrieved from https://www.scien.cx/2025/01/26/my-clever-solution-for-handling-multiple-submit-buttons/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.