Pressing Enter Key on HTML Form with Multiple Submit Buttons

I’d like to get some feedback on what people think the best behavior is for an HTML form that has multiple submit buttons with different actions.

Given the following form:

<form id="my-form">
    <input type="hidden" name="user-id" value="42">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
    <button formaction="/update">Update</button>
    <button formaction="/delete">Delete</button>
</form>

Form with two submit buttons
When focus is on the email field and the user presses Enter, the form is submitted using the first button in the form – the update button. This seems suboptimal to me given that the user has two options for how to submit the form.

My inclination is to prevent form submissions when Enter is pressed. The following function will prevent the Enter key’s default behavior on all text-like input fields.

<script>
    var inputs = document.getElementsByTagName('input');
    var notTheseInputs = ['checkbox', 'radio', 'submit', 'reset', 'button'];
    for (input of inputs) {
        if (notTheseInputs.indexOf(input.type) === -1) {
            input.addEventListener('keypress', (e)=> {
                if (e.key === 'Enter') {
                    e.preventDefault();
                }
            })
        }
    }
</script>

I’m interested in what people think about this. Do you think it causes usability or accessibility issues?

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.