jquery disable form submit on enter
Solution 1
If keyCode
is not caught, catch which
:
$('#formid').on('keyup keypress', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});
EDIT: missed it, it's better to use keyup
instead of keypress
EDIT 2: 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. Also it doesn't work (anymore?) by just binding the event to the form "name" but only to the form id. Therefore I made this more obvious by changing the code example appropriately.
EDIT 3: Changed bind()
to on()
Solution 2
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:
$('form input').on('keypress', function(e) {
return e.which !== 13;
});
DEMO: http://jsfiddle.net/bnx96/325/
Solution 3
Even shorter:
$('myform').submit(function() {
return false;
});
Solution 4
$('form').keyup(function(e) {
return e.which !== 13
});
The event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.
Solution 5
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.which == 13) {
e.preventDefault();
return false;
}
});
This solution works on all forms on website (also on forms inserted with ajax), preventing only Enters in input texts. Place it in a document ready function, and forget this problem for a life.
Related videos on Youtube
Adam Levitt
Updated on July 17, 2021Comments
-
Adam Levitt almost 3 years
I have the following javascript in my page which does not seem to be working.
$('form').bind("keypress", function(e) { if (e.keyCode == 13) { e.preventDefault(); return false; } });
I'd like to disable submitting the form on enter, or better yet, to call my ajax form submit. Either solution is acceptable but the code I'm including above does not prevent the form from submitting.
-
SamB about 5 yearsHere is a simple HTML only solution: stackoverflow.com/a/51507806/337934
-
-
Bojangles almost 12 yearsjQuery normalises it to
e.which
, so you don't need to test fore.keyCode
, but +1 for the most likely cause of this issue. -
tundoopani about 11 years@zessx This doesn't seem to work if keyup is used though. See jsfiddle.net/bD9jN/1
-
Danubian Sailor about 11 yearswhy keyup is better than keypress? I'm in situation when I've had to register to both to stop the form submitting.
-
zessx about 11 years
ENTER
is a key, not a char. Depending of your browser, you can have some issues askeypress
is only fired when a char is typed (generally with webkit). Usingkeyup
assure you to catch any kind of key, like a-z, enter, arrows... -
s.krueger almost 11 yearsThis (and the fiddle) don't seem to work any longer (FF21) :(
-
Dylan Valade over 10 yearsiOS Go button was my problem on a custom autocomplete input field. This solved it.
-
Nick about 10 yearsThis will disable all form submission, including clicking the submit button.
-
haibuihoang over 9 yearsBut this will prevent user click as well?
-
Tom over 9 years@haibuihoang Yes this will disable form submission.
-
Dirk Schumacher about 9 yearsControverse to the EDIT of this answer: I had an issue w/ 'keyup'. It seemed that the submit was already done before the key came up and the event was triggered. Thus keypress works for me.
-
shaneparsons about 9 yearsThis prevents the enter key from being used in
textareas
within the same form. Using$("form input")
instead of$("form :input")
seems to fix it. DEMO: jsfiddle.net/bnx96/279 -
flu almost 9 yearsYou should use
function(e) {e.preventDefault();}
as return values in event handlers are deprecated: stackoverflow.com/a/20045473/601386 -
daveslab over 8 years@user1111929 This does work great but it shouldn't be the top answer because the question asked only about
Enter
and not about disabling form submission by theSubmit
button. -
afnpires about 8 yearsActually it should be
e.target.nodeName === 'INPUT' && e.target.type !== 'textarea'
. With the specified code it will allow to submit forms if a radio or checkbox are focused. -
chromigo almost 8 yearsDo you need
return false;
for this?e.preventDefault();
seems enougth -
HaveNoDisplayName over 7 yearsadd some explanation
-
Yvan1263 over 7 years@HaveNoDisplayName : Updated.
-
German Khokhlov over 7 yearsImportant! This solution block breaks in textarea.
-
Krushna over 7 yearsThis is not working any more in chrome, does any one has some better solution
-
JRad the Bad over 7 yearsA common situation in which you may want to preserve the form submission, but disable submission on pressing the 'enter' key, is if you decide to use a jQuery
onClick
event to validate a form, and still submit using jQuery. In other words, there are cases where you only want to submit via javascript/jQuery. While you can still use AJAX with this solution, it disables the base functionality of thesubmit
method. -
Tikky about 7 yearsThe problem is if I have in the same form a textbox, now I can't add an enter(to make a new line) in textbox.
-
KingRider about 7 yearsnot 100%... work a regular submit a key... best use jquery to prevent
-
KingRider about 7 yearsGood code example, but my opinion is best use
BIND
(depend a version jquery) and key events jquery-ui (Look: api.jqueryui.com/jQuery.ui.keyCode) enjoy ;-) ... thanks zessx -
Mario Werner almost 7 yearsThis also prevents the form from being submitted if you click the "Submit" button.
-
emilys over 6 yearsGood alternate answer (with the caveats above) because... well, sometimes this is all you need.
-
teran over 6 years
keyCode === 13 && !$(e.target).is('textarea')
-
John Langford over 6 yearsIn my case I wanted to allow the user to submit the form exactly once by pressing Enter. I used a method very similar to this one, but instead I set a "form_enabled" variable to false after the first form submission, then I checked that variable to determine whether to return false on form submission.
-
shababhsiddique about 6 yearsthis is exactly what i needed for a situation, thank you
-
MattClaff about 6 yearsThis submit normally happens on enter within
input
&textarea
so addingif(keyCode === 13 && event.target.nodeName === 'INPUT' && event.target.nodeName === 'TEXTAREA')
should do the trick. -
Luo Jiong Hui over 4 yearsI added an invisible input box to counter "form will be submitted upon ENTER key" caused by "the form has only 1 input field and that field is a 'text' input".
-
Tarandeep Singh over 3 years@MarioWerner if you look at the question, it says specifically to avoid form submit. and this is the purpose of this code. so the user does not want the form submit for a single form which is why this should work. Yes this should not work on form submit, since user want to do stuff on any kind of submit action.
-
Mario Werner over 3 years@TarandeepSingh No, the title and the question say "disable form submit on enter"
-
Jonathan almost 3 yearsPlease explain your solution.
-
Mauliardiwinoto over 2 yearsthis safe my day. Actually i'm using it because my input have to do something before submit press, so to make sure that work, i have to disable my enter key on that form. Thanks in advance :)