Prevent Enter Key Submitting Forms With JQuery

A common practice that some users have is to press the enter key when they are filling in forms on the web. This might be when they are just moving to the next field, but the trouble is that this will submit the form.

To prevent this from happening you can simply stop the form being submitted if the enter key had been pressed. This is done by binding a JQuery event to the input elements of the form and returning false if the key pressed is enter, which has the keyCode value of 13. We also include a call to the JQuery method preventDefault() to stop the event propagating.

$('form input').keydown(function (e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        return false;
    }
});

Taking this a step further it might be an idea to try and achieve what the users are expecting and jump the focus to the next element in the form. Due to security restrictions it is impossible to change the key that was pressed to a tab, but the event we are looking for can be easily simulated. All we need to do it find all the input elements in the form, figure out where the current element is and then focus on the next input element (if it exists). The following code does just this.

$('form input').keydown(function (e) {
    if (e.keyCode == 13) {
        var inputs = $(this).parents("form").eq(0).find(":input");
        if (inputs[inputs.index(this) + 1] != null) {                    
            inputs[inputs.index(this) + 1].focus();
        }
        e.preventDefault();
        return false;
    }
});

Comments

You are going to stop people also from pressing Enter on "Submit"?

Change:

$('form input').keydown(function (e) {

to:

$('form input:not([type="submit"])').keydown(function(e) {
Permalink

thanks for the code , it help me alot, thanks again

Permalink

I can submit this form bt pressing teh Enter key when in a text input field (i.e if I use the Enter key instead of the tab key to move from one field to the next. I tried to prevent this on my site using teh Jquery on this page but it did not work for me either. Is there a better way ?

Chhers

Richard

Permalink
I'm starting with jquery and this article has helped me a lot. Thank you for writing it.
Permalink

Awesome :)

Permalink

Thanks

Permalink

I made a font-size slider that works great. It indicates the size with a txt. You can click the text and it will change into an input field so you can omit the slider and directly input the font-size. On blur it will set the slider & fontsize. The last step was to implement key action (enter) to blur the field and set the values. But the page where I am using it (a wordpress code-snippet plugin page) binds the enter action to 'save' the code-snippet. So now my code works, upon enter key it sets the size you input in the field, but it also saves the snippet. So I took your example, and tried adding e.preventDefault(), but it still also saves the snippet, I guess that save action isn't default. Can you tell me how I can unbind that save action? 

Working jsfiddle: http://jsfiddle.net/junkfood66/e3y0jn2z/50/

Permalink

Add new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
2 + 1 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.