jquery disable form submit on enter

Question

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.

Anoint

Here is a simple HTML only solution: https://mcmap.net/q/53242/-prevent-users-from-submitting-a-form-by-hitting-enter – Sofa

Answer 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()

Fuel

jQuery normalises it to e.which, so you don't need to test for e.keyCode, but +1 for the most likely cause of this issue. – Goff

@Fuel This doesn't seem to work if keyup is used though. See jsfiddle.net/bD9jN/1 – Milkfish

why keyup is better than keypress? I'm in situation when I've had to register to both to stop the form submitting. – Masurium

ENTER is a key, not a char. Depending of your browser, you can have some issues as keypress is only fired when a char is typed (generally with webkit). Using keyup assure you to catch any kind of key, like a-z, enter, arrows... – Fuel

This (and the fiddle) don't seem to work any longer (FF21) :( – Brett

Controverse 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. – Strict

Do you need return false; for this? e.preventDefault(); seems enougth – Trimolecular

Important! This solution block breaks in textarea. – Mccormack

This is not working any more in chrome, does any one has some better solution – Mcdaniel

The 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. – Heteromerous

Good 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 – Mccloud

keyCode === 13 && !$(e.target).is('textarea') – Thicken

This submit normally happens on enter within input & textarea so adding if(keyCode === 13 && event.target.nodeName === 'INPUT' && event.target.nodeName === 'TEXTAREA') should do the trick. – Garaway

this 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 :) – Speos

Answer 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/

Burget

iOS Go button was my problem on a custom autocomplete input field. This solved it. – Renascence

This 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 – Gladygladys

Answer 3

Even shorter:

$('myform').submit(function() {
  return false;
});

Alard

But this will prevent user click as well? – Dykes

@Dykes Yes this will disable form submission. – Converse

You should use function(e) {e.preventDefault();} as return values in event handlers are deprecated: https://mcmap.net/q/102240/-event-returnvalue-is-deprecated-please-use-the-standard-event-preventdefault-instead – Inescutcheon

@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 the Submit button. – Syman

A 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 the submit method. – Java

In 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. – Pollypollyanna

Answer 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.

which docs.

Charis

Answer 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.

Orchid

Answer 6

Most answers above will prevent users from adding new lines in a textarea field. If this is something you want to avoid, you can exclude this particular case by checking which element currently has focus :

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
  e.preventDefault();
  return false;
}

Linalinacre

Answer 7

if you just want to disable submit on enter and submit button too use form's onsubmit event

<form onsubmit="return false;">

You can replace "return false" with call to JS function that will do whatever needed and also submit the form as a last step.

Bentley

This will disable all form submission, including clicking the submit button. – Blowfly

not 100%... work a regular submit a key... best use jquery to prevent – Mccloud

Good alternate answer (with the caveats above) because... well, sometimes this is all you need. – Maraud

this is exactly what i needed for a situation, thank you – Undergrowth

Best solution. It's not hacky and it doesn't need extra script for each form. – Hultgren

Answer 8

The simple way is to change type of button to button - in html and then add event in js...

Change from this:

<form id="myForm">
   <button type="submit">Submit</button>
</form>

To

<form id="myForm">
   <button type="button" id="btnSubmit">Submit</button>
</form>

And in js or jquery add:

$("#btnSubmit").click(function () {
    $('#myForm').submit();
});

Plumbum

Answer 9

The overkill of having to capture and test every keystroke for the ENTER key really bugs me, so my solution relies on the following browser behavior:

Pressing ENTER will trigger a click event on the submit button (tested in IE11, Chrome 38, FF 31) ** (ref: http://mattsnider.com/how-forms-submit-when-pressing-enter/ )

So my solution is to remove the standard submit button (i.e. <input type="submit">) so that the above behavior fails because there's no submit button to magically click when ENTER is pressed. Instead, I use a jQuery click handler on a regular button to submit the form via jQuery's .submit() method.

<form id="myform" method="post">
  <input name="fav_color" type="text">
  <input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>

<script>
 $('#form-button-submit').click(function(){
    $('#myform').submit();
  });
</script>

Demo: http://codepen.io/anon/pen/fxeyv?editors=101

** this behavior is not applicable if the form has only 1 input field and that field is a 'text' input; in this case the form will be submitted upon ENTER key even if no submit button is present in the HTML markup (e.g. a search field). This has been standard browser behavior since the 90s.

Fitton

I 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". – Pinch

Answer 10

You can do this perfectly in pure Javascript, simple and no library required. Here it is my detailed answer for a similar topic: Disabling enter key for form

In short, here is the code:

<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>

This code is to prevent "Enter" key for input type='text' only. (Because the visitor might need to hit enter across the page) If you want to disable "Enter" for other actions as well, you can add console.log(e); for your your test purposes, and hit F12 in chrome, go to "console" tab and hit "backspace" on the page and look inside it to see what values are returned, then you can target all of those parameters to further enhance the code above to suit your needs for "e.target.nodeName", "e.target.type" and many more...

Aerogram

Actually 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. – Bedazzle

Answer 11

I don't know if you already resolve this problem, or anyone trying to solve this right now but, here is my solution for this!

$j(':input:not(textarea)').keydown(function(event){
    var kc = event.witch || event.keyCode;
    if(kc == 13){
    event.preventDefault();
        $j(this).closest('form').attr('data-oldaction', function(){
            return $(this).attr('action');
        }).attr('action', 'javascript:;');

        alert('some_text_if_you_want');

        $j(this).closest('form').attr('action', function(){
            return $(this).attr('data-oldaction');
        });
        return false;
    }
});

Opinionative

Answer 12

In firefox, when you at input and press enter, it will submit it's upper form. The solution is in the will submit form add this:

<input type="submit" onclick="return false;" style="display:none" />

Toreutics

Answer 13

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

Algia

Please explain your solution. – Relucent

Answer 14

The following code will negate the enter key from being used to submit a form, but will still allow you to use the enter key in a textarea. You can edit it further depending on your needs.

<script type="text/javascript">
        function stopRKey(evt) {
          var evt = (evt) ? evt : ((event) ? event : null);
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
          if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio") || (node.type=="checkbox")) )  {return false;}
        }

        document.onkeypress = stopRKey;
</script> 

Chump

Answer 15

3 years later and not a single person has answered this question completely.

The asker wants to cancel the default form submission and call their own Ajax. This is a simple request with a simple solution. There is no need to intercept every character entered into each input.

Assuming the form has a submit button, whether a <button id="save-form"> or an <input id="save-form" type="submit">, do:

$("#save-form").on("click", function () {
    $.ajax({
        ...
    });
    return false;
});

Nanceenancey

Answer 16

Here is a simple JavaScript solution without using different variations of handling keydown or keypress events:

document.forms[0].addEventListener('submit', function(e) {
    if(document.activeElement.getAttribute('type') !== 'submit') {
        e.preventDefault();
    }
});

Submitting the form will occur only when the active element on your page is the submit button. So you can submit the form by clicking on your submit button or by pressing the ENTER key when the submit button has focus.

Poyssick

Answer 17

I heard which is not recommended, so change Best rated answer to this.

$('#formid').on('keyup keypress', function(e) {
  if (e.key === 'Enter') { 
    e.preventDefault();
    return false;
  }
});

ref. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

Samsun

Answer 18

Use EnterByTab() for elimnated Enter->Submit form

function EnterByTab(){  //only in form
  $('body').on('keydown', 'input, select, radio', function(e) {
    if (e.key === "Enter") {
      var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
      focusable=form.find(':input,a,select,button,textarea').filter(':visible');
      next = focusable.eq(focusable.index(this)+1);
      var i=1;
      while (next.attr('readonly') || next.prop("type")=="radio") {
        i++;
        next = focusable.eq(focusable.index(this)+i);
      }
      if (next.length) {
        next.focus();
      } else {
        form.submit(); //original behavior
      }
      return false;
    }
  });
}

Hurds

Answer 19

When the file is finished (load complete), the script detect each event for " Entry " key and he disable the event behind.

<script>
            $(document).ready(function () {
                $(window).keydown(function(event){
                    if(event.keyCode == 13) {
                        e.preventDefault(); // Disable the " Entry " key
                        return false;               
                    }
                });
            });
        </script>

Fugacity

add some explanation – Berwick

@Berwick : Updated. – Fugacity

Answer 20

Complete Solution in JavaScript for all browsers

The code above and most of the solutions are perfect. However, I think the most liked one "short answer" which is incomplete.

So here's the entire answer. in JavaScript with native Support for IE 7 as well.

var form = document.getElementById("testForm");
form.addEventListener("submit",function(e){e.preventDefault(); return false;});

This solution will now prevent the user from submit using the enter Key and will not reload the page, or take you to the top of the page, if your form is somewhere below.

Combe

This also prevents the form from being submitted if you click the "Submit" button. – Creeps

@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. – Combe

@TarandeepSingh No, the title and the question say "disable form submit on enter" – Creeps

Answer 21

How about this:

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

This should disable all forms with submit buttons in your app.

Smother