Preventing form submission when Enter is pressed

Question

I have a form with a disabled submit button. Even though the user can't press this button, he can still hit Enter to submit the form. How do I prevent that?

Answer 1

If you want to completely disable the form submit (However I am wondering why the whole <form> element is then there in first place), then you need to let its submit event handler return false.

So, basically:

<form onsubmit="return false;">

You can add it using Javascript/DOM manipulation during onload as previous answerers pointed out.

If you only want to disable the Enter key to submit the form, then you need to let its keydown event handler return false when the key of the event matches Enter (this one is crossbrowser compatible and covers both the default Enter as well as the numpad Enter!).

<form onkeypress="return event.key != 'Enter';">

This however also disables the Enter key in any <textarea> elements in the form. If you have any of them and you would like to keep them functioning, then you'll need to remove the onkeydown from the <form> and copy it over all <input> and <select> elements. jQuery can be helpful in this:

$('input, select').keydown(event => event.key != 'Enter');

See also:

• Prevent users from submitting a form by hitting Enter

Answer 2

Assuming HTML:

<form id="myForm"> ...

You can do this with JavaScript:

document.getElementById("myForm").onsubmit = function () {
    return false;
};

Answer 3

Instead of implementing two methods of disabling form submitting, add an event handler to form's onsubmit which will check the disabled property of the button:

myForm.onsubmit = function () { 
    if (myForm.mySubmit.disabled) 
        return false;
}

Answer 4

jQuery Solution:

$(document).ready(function(){
  $('form[name="form"]').keypress( function(evt){
    return !(evt.which==13 && evt.target.type!='textarea');
  });
  $('form[name="form"] input[type="submit"]').attr('tabIndex',-1); // this prevents submit also by spacebar (keyCode==32)
  //$('form[name="form"]').submit(function(){ alert('test'); return false; }); // test
});

Answer 5

Say you had a form with an id of "myForm":

<form id="myForm" action="some_file" method="post">
   ...
</form>
<script type="text/javascript">
    document.getElementById( "myForm").onsubmit = function() {
          return false;
    };
    //or with jQuery: $( '#myForm' ).submit( function() { return false; } );
</script>

Answer 6

If you don't want to edit the onsubmit event of the form, you can do it like this.
Add this to the text input:

onKeyPress="return noEnter(event)"

And this to the header:

    function noEnter(e)
    {
        var key;
        // firefox vs. ie
        (window.event) ? key = window.event.keyCode : key = e.which;
        (key == 13) ? return false : return true;
    }

easier to pull of with jquery.

Answer 7

document.getElementById("myForm").onsubmit = function () {
    return false;
};

These codes doesn't work on Chrome and Safari. It submits form to action url.

But <form onsubmit="return false;"> is useful.