Question

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?

Answer 1

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.