Question

54

Prevent a button to submit on enter key

rated 0 times [ 55] [ 1] / answers: 1 / hits: 35849 / 14 Years ago, tue, november 2, 2010, 12:00:00

I have two buttons one with id=enterToSubmit and other with id=clickToSubmit. When a user hit the enterkey, I want enterToSubmit button to submit form
not the clickToSubmit button.

On the same page, I have a textbox id=title, and on Page Load I hide enterToSubmit button, until user enters something in the textbox, then users can hit Enter key to submit form.

How do preven clickToSubmit button to submit when users press Enter key?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryanulyssesb

Add To Favorites

Follow

Total Points: 91

Total Questions: 105

Total Answers: 102

Location: England

Member since Tue, Sep 8, 2020

4 Years ago

ryanulyssesb questions

1 Vue 3: `defineProps` are referencing locally declared variables

Sat, Nov 13, 21, 00:00, 3 Years ago

1 How to put file path in package.json file

Sat, Mar 20, 21, 00:00, 3 Years ago

1 How to test dynamic imports (then and catch) with Jest

Mon, Sep 14, 20, 00:00, 4 Years ago

1 Sending data from Python to Javascript using EEL

Mon, Mar 9, 20, 00:00, 4 Years ago

1 SyntaxError: Unexpected token / in JSON at position 132

Sun, Jul 7, 19, 00:00, 5 Years ago

View All

answered 14 Years ago jeffery · Accepted Answer

Unfortunately you can't change the ‘default’ submit button in HTML, it's always the first input/button with type submit/image.

Whilst you can attempt to catch Enter keypress events manually it is highly unreliable to do so, since Enter isn't always supposed to submit a form, depending on (a) what type of element is focused, (b) whether shift/ctrl+enter is used, (c) what other elements are in the form and (d) what browser it is. If you miss a case you will get accidental default-submissions; if you hit a case you shouldn't, you'll get accidental enter-submissions.

So it is in general better, when you want to control the default submission action of a form, to put an extra button in as the first submit button in the form. If you don't want this button to be displayed, you can position it with a large negative left value to push it off the side of the page. (This is a bit ugly, but hiding it via display or visibility will stop it working in some browsers.)

So perhaps you could ‘hide’ the enter-to-submit button not by making it disappear but by pushing it off the page where it can't be seen, and then catching the click event on it to return false and stop the form submission.