How to Prevent Enter Keypress to Submit a Web Form

Prevent users from submitting a form by hitting Enter

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;
    }
  });
});

Prevent form submission on hitting Enter key for Text

to piggy back on @Dasein's anwser you want to prevent the default behavior instead of stopping propagation ( i.e. returning false):

document.getElementById("myForm").onkeypress = function(e) {  var key = e.charCode || e.keyCode || 0;       if (key == 13) {    alert("I told you not to, why did you do it?");    e.preventDefault();  }}

<form id="myForm" action="MyBackEnd.aspx" method="post">
<table>    <tbody>    <tr>        <td>          Joe:  <input id="JoeText" type="text">        </td>        <td>          Schmoe:  <input id="SchmoeText" type="text" >        </td>    </tr>    </tbody></table>
<input type=submit>

Avoid only form submission on Enter key press

Replace your button with this button

<button type="button" onclick="formSubmit()">Submit</button>

then handler submit event with javascript like below.

function formSubmit() { 
    //here your code
} 

React prevent form submission when enter is pressed inside input

You need to create a form handler that would prevent the default form action.

The simplest implementation would be:

<form onSubmit={e => { e.preventDefault(); }}>

But ideally you create a dedicated handler for that:

<form onSubmit={this.submitHandler}>

with the following implementation

submitHandler(e) {
    e.preventDefault();
}

jquery disable form submit on enter

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

Clean way to prevent enter button submitting a form

Set the UseSubmitBehavior property on the submit button to FALSE. (found the solution here)

Prevent users submitting a form using Enter but enable enter key on one form input field

You can use event.target.id to prevent and allow particular inputs.

 $(window).keydown(function(event){      
        if(event.keyCode == 13) {
          if(event.target.id==="allowedInput"){
            alert('submit form')
          }else{
            alert('not submitting')
            event.preventDefault();
            return false;
          }

        }
    });

Demo:

$(window).keydown(function(event) {
  if (event.keyCode == 13) {    if (event.target.id === "allowedInput") {      alert('submit form')    } else {      alert('not submitting')      event.preventDefault();      return false;    }
  }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input id="allowedInput" name="allowedInput" type="text" class="kmw-disabled keymanweb-font">
<input id="notallowedInput" name="notallowedInput" type="text" class="kmw-disabled keymanweb-font">

---

Related Topics