Javascript disable enter on form not working

Question

I am trying to disable submitting a form when the user presses enter on input fields, but I can't seem to get anything to work. The latest script I've tried was adding this to the head:

<script type="text/javascript">
    $(document).ready(function() {
        $(window).keydown(function(event){
            if(event.target.tagName != 'INPUT') {
                if(event.keyCode == 13) {
                    event.preventDefault();
                    return false;
                }
            }
        });
    });
</script>

I am not receiving any errors in the console so I can't tell if something is conflicting.

You want $('form').on('submit', function(e) { e.preventDefault(); }) — adeneo
– adeneo, Commented Feb 2, 2016 at 19:06

Pabs123 · Accepted Answer · 2016-02-02 19:07:09Z

3

Right now you're capturing the event in the window, so preventDefault() isn't going to do what you want it to. you need to capture it from the form so you can prevent its default submit action

Try:

$('form').on('keyup keypress', function(e) {
  var keyCode = e.keyCode;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

answered Feb 2, 2016 at 19:07

Pabs123

3,43315 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

DinoMyte Over a year ago

You should replace the delegation of 'keyup keypress' event with 'submit', else that piece of code is going to execute on everytime user interact with the form.

Pabs123 Over a year ago

I disagree. I think it makes more sense to check on every keypress. All this is checking is if the key code is 13, so it's not like running it each time is a lot of overhead

DinoMyte Over a year ago

the condition keyCode === 13 is checked inside the function. That means , irrespect what key is pressed, the function would always be invoked.

Pabs123 Over a year ago

right, I'm not saying it's not going to run. I'm just saying all it's gonna do is check the key code and move on. it's a single comparison calculation so it's almost negligible

Igor Raush Over a year ago

Discarding all 'submit' events would prevent the form from being submitted by any means. If this is acceptable (i.e. if the OP intends to collect form data and submit it via AJAX), then it's both cleaner and more performant than listening to key events.

|

Viktor Kukurba · Accepted Answer · 2016-02-02 19:15:54Z

0

You can use event capturing for that.

    window.addEventListener('keydown',function(event) {
        if(event.target.tagName != 'INPUT') {
            if(event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        }
    }, true);

answered Feb 2, 2016 at 19:15

Viktor Kukurba

1,3709 silver badges14 bronze badges

Collectives™ on Stack Overflow

Javascript disable enter on form not working

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related