Home » Jquery » Prevent users from submitting a form by hitting Enter

Prevent users from submitting a form by hitting Enter

Posted by: admin November 2, 2017 Leave a comment

Questions:

I have a survey on a website, and there seems to be some issues with the users hitting enter (I don’t know why) and accidentally submitting the survey (form) without clicking the submit button. Is there a way to prevent this?

I’m using HTML, PHP 5.2.9, and jQuery on the survey.

Answers:

You can use a method such as

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

In reading the comments on the original post, to make it more usable and allow people to press Enter if they have completed all the fields:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

Questions:
Answers:

Disallow enter key anywhere

If you don’t have a <textarea> in your form, then just add the following to your <form>:

<form ... onkeypress="return event.keyCode != 13;">

Or with jQuery:

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

This will cause that every key press inside the form will be checked on the keyCode. If it is not 13 (the Enter key), then it will return true and anything will go as expected. If it is 13 (the Enter key), then it will return false and anything will stop immediately, so the form won’t be submitted.

The keypress event is preferred over keydown as this is only fired when the character is actually being inserted. The keydown (and keyup) are fired when any key is pressed, including control keys. And, the keyCode of keypress represents the actual character being inserted, not the physical key used. This way you don’t need to explicitly check if Numpad Enter key (108) is pressed too. The keyup is too late to block form submit.

Note that $(window) as suggested in some other answers instead of $(document) doesn’t work for keydown/keypress/keyup in IE<=8, so that’s not a good choice if you’re like to cover those poor users as well.

Allow enter key on textareas only

If you have a <textarea> in your form (which of course should accept the Enter key), then add the keypress handler to every individual input element which isn’t a <textarea>.

<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...

To reduce boilerplate, this is better to be done with jQuery:

$(document).on("keypress", ":input:not(textarea)", function(event) {
    return event.keyCode != 13;
});

If you have other event handler functions attached on those input elements, which you’d also like to invoke on enter key for some reason, then only prevent event’s default behavior instead of returning false, so it can properly propagate to other handlers.

$(document).on("keypress", ":input:not(textarea)", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

Allow enter key on textareas and submit buttons only

If you’d like to allow enter key on submit buttons <input|button type="submit"> too, then you can always refine the selector as below.

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    // ...
});

Note that input[type=text] as suggested in some other answers doesn’t cover those HTML5 non-text inputs, so that’s not a good selector.

Questions:
Answers:

I had to catch all three events related to pressing keys in order to prevent the form from being submitted:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

You can combine all the above into a nice compact version:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

Questions:
Answers:

If you use a script to do the actual submit, then you can add “return false” line to the onsubmit handler like this:

<form onsubmit="return false;">

Calling submit() on the form from JavaScript will not trigger the event.

Questions:
Answers:

Use:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

This solution works on all forms on a 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.

Questions:
Answers:

Instead of preventing users from pressing Enter, which may seem unnatural, you can leave the form as is and add some extra client-side validation: When the survey is not finished the result is not sent to the server and the user gets a nice message telling what needs to be finished to complete the form. If you are using jQuery, try the Validation plugin:

http://docs.jquery.com/Plugins/Validation

This will require more work than catching the Enter button, but surely it will provide a richer user experience.

Questions:
Answers:

I can’t commet yet, so I’ll post a new answer

Accepted answer is ok-ish, but it wasn’t stoping submit on numpad enter. At least in current version of Chrome. I had to alter the keycode condition to this, then it works.

if(event.keyCode == 13 || event.keyCode == 169) {...}

Questions:
Answers:

A nice simple little jQuery solution:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

Questions:
Answers:

Giving the form an action of ‘javascript:void(0);’ seems to do the trick

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

Questions:
Answers:

I needed to prevent only specific inputs from submitting, so I used a class selector, to let this be a “global” feature wherever I need it.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

And this jQuery code:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

Alternatively, if keydown is insufficient:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

Some notes:

Modifying various good answers here, the Enter key seems to work for keydown on all the browsers. For the alternative, I updated bind() to the on() method.

I’m a big fan of class selectors, weighing all the pros and cons and performance discussions. My naming convention is ‘idSomething’ to indicate jQuery is using it as an id, to separate it from CSS styling.

Questions:
Answers:

You could make a JavaScript method to check to see if the Enter key was hit, and if it is, to stop the submit.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

Just call that on the submit method.

Questions:
Answers:

I had a similiar problem, where I had a grid with “ajax textfields” (Yii CGridView) and just one submit button. Everytime I did a search on a textfield and hit enter the form submitted. I had to do something with the button because it was the only common button between the views (MVC pattern). All I had to do was remove type="submit" and put onclick="document.forms[0].submit()

Questions:
Answers:

I think it’s well covered with all the answers, but if you are using a button with some JavaScript validation code you could just set the form’s onkeypress for Enter to call your submit as expected:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

The onkeypress JS could be whatever you need to do. There’s no need for a larger, global change. This is especially true if you’re not the one coding the app from scratch, and you’ve been brought into fix someone else’s web site without tearing it apart and re-testing it.

Questions:
Answers:

A completely different approach:

  1. The first <button type="submit"> in the form will be activated on pressing Enter.
  2. This is true even if the button is hidden with style="display:none;
  3. The script for that button can return false, which aborts the submission process.
  4. You can still have another <button type=submit> to submit the form. Just return true to cascade the submission.
  5. Pressing Enter while the real submit button is focussed will activate the real submit button.
  6. Pressing Enter inside <textarea> or other form controls will behave as normal.
  7. Pressing Enter inside <input> form controls will trigger the first <button type=submit>, which returns false, and thus nothing happens.

Thus:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

Questions:
Answers:

It is my solution to reach the goal,
it is clean and effective.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

Questions:
Answers:
  1. Do not use type=”submit” for inputs or buttons.
  2. Use type=”button” and use js [Jquery/angular/etc] to submit form to server.
Questions:
Answers:

In my specific case I had to stop ENTER from submitting the form and also simulate the clicking of the submit button. This is because the submit button had a click handler on it because we were within a modal window (inherited old code). In any case here’s my combo solutions for this case.

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

This use case is specifically useful for people working with IE8.

Questions:
Answers:

This works for me

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

Questions:
Answers:

A simpler and elegant way to do this is:

create a validate function which returns true or false (with your business logic inside it) and add this code to your script:

$(function() {
    $('your form selector').submit(function() {
        return validate();
    });
});

Questions:
Answers:

This has worked for me in all browsers after much frustration with other solutions. The name_space outer function is just to stay away from declaring globals, something I also recommend.

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

Sample use:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

Questions:
Answers:

Something I have not seen answered here: when you tab through the elements on the page, pressing Enter when you get to the submit button will trigger the onsubmit handler on the form, but it will record the event as a MouseEvent. Here is my short solution to cover most bases:

This is not a jQuery-related answer

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

JavaScript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

To find a working example: https://jsfiddle.net/nemesarial/6rhogva2/

Questions:
Answers:

I’d like to add a little CoffeeScript code (not field tested):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(I hope you like the nice trick in the unless clause.)

Questions:
Answers:

Use:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>

Questions:
Answers:

Not putting a submit button could do. Just put a script to the input (type=button) or add eventListener if you want it to submit the data in the form.

Rather use this

<input type="button">

than using this

<input type="submit">

Questions:
Answers:

In my case I had a couple of jQuery UI autocomplete fields and textareas in a form, so I definitely wanted them to accept Enter. So I removed the type="submit" input from a form and added an anchor <a href="" id="btn">Ok</a> instead. Then I styled it as a button and added the following code:

$( '#btn' ).click( function( event ){
    event.preventDefault();
    if ( validateData() ){
        $( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
        setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
    }
    return false;
});

If a user fills all required fields, validateData() succeeds and the form submits.