How to prevent enter key from submitting a form but still allow enter to work?

Question

I'm using XOXCO Tags-Input.

Here is a demo http://xoxco.com/projects/code/tagsinput/example.html

So in order to complete a tag i have to hit enter but when i hit enter it submits my form.

I can disable enter for the whole form with this code but then i can't complete a tag.

$("#form").keypress(function(e) {
    //Enter key
    if (e.which == 13) {
    return false;
    }
});

So i still need enter to work but i also need it to not submit the form and i'm not sure how to do that.

rvalis · Answer 1 · 2015-04-06T00:45:37.880

1

You need to prevent the default behavior of the enter press, which is to submit the form. For example...

$('#form').keypress(function(e){
    e.preventDefault(); // prevent form submission
    // do stuff with the keypress
    $('#form').submit(); // now, submit the form
});

edited Apr 06 '15 at 00:45

answered Apr 06 '15 at 00:11

rvalis

37
3

Do you have a better explanation of how i would do this. – EliteViper777 Apr 06 '15 at 00:29
Submit the form later? You should be able to, wherever in your function that you want to, call $('#form').submit() to submit the form manually. If needed, I can update my answer with those details. – rvalis Apr 06 '15 at 00:33
If you could update your answer that might help. – EliteViper777 Apr 06 '15 at 00:37

user1477388 · Answer 2 · 2015-04-06T13:28:46.110

1

The first thing that comes to mind is:

$('form').on('keypress keydown keyup', function(e) {
    if (e.which == 13) {
        //alert(e.which); 
        e.preventDefault();
        return false;
    }
});

https://jsfiddle.net/Lhujkub7/

edited Apr 06 '15 at 13:28

answered Apr 06 '15 at 00:14

user1477388

20,790
32
144
264

You're right! Updated with working example. Cred goes to this answer by Dave Paroulek http://stackoverflow.com/a/9891024/1477388 – user1477388 Apr 06 '15 at 13:29

score 0 · Accepted Answer · answered Apr 06 '15 at 01:16

Ok, i solved it in case anyone else runs into this problem here is what i did.

$('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;
        }
    });

How to prevent enter key from submitting a form but still allow enter to work?

3 Answers3