Prevent a button to submit on enter key
How do preven "clickToSubmit" button to submit when users press Enter key?
Try this:
$("#clickToSubmit").on("keydown", function(e){
if(e.keyCode === 13){
e.preventDefault();
}
});
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.
jQuery('#clickToSubmit').click(function(e){
if(e.keyCode==13){
e.preventDefault();
}
});
$('#formId').on('keyup keypress', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});
Usually form is submitted on Enter when you have focus on input
elements.
We can disable Enter key (code 13) on input elements within a form.
Also, As in some newer versions of Firefox the form submission is not prevented, it's safer to add the keypress event to the form as well.