Why Does Forms With Single Input Field Submit Upon Pressing Enter Key in Input

Why does forms with single input field submit upon pressing enter key in input

This is a little known "Quirk" that has been out for a while. I know some people have resolved it in various ways.

The easiest bypass in my opinion is to simply have a second input that isn't displayed to the user. Granted not all that user friendly on the backend, it does work to resolve the issue.

I should note that the most common place that I hear of this issue is with IE specifically and not with FireFox or others. Although it does seem to affect them as well.

Why does a FORM with one text INPUT submit on enter while one with two text INPUTs does not?

This behaviour was introduced in the HTML 2.0 specification. See the following article for more details:

Form submission and the ENTER key?

When there is only one single-line text input field in a form, the
user agent should accept Enter in that field as a request to submit
the form

Source: W3C Specs

HTML5: How to make a form submit, after pressing ENTER at any of the text inputs?

Try adding this between the <form></form> tags

<input type="submit" style="display: none" />

Tested it and it works on Firefox and Chrome. If you have a submit input type in the form, enter should automatically submit it, regardless of whether it's visible or not.

I am actually using this myself in a login form, though in the username field, it makes more sense to move to the next field than to submit. Just in case you have a similar use case, here's the code I used (requires jQuery)

$('#username').keypress(function(event) {
    if (event.keyCode == 13 || event.which == 13) {
        $('#password').focus();
        event.preventDefault();
    }
});

Note that there is a slight bug though -- if the user selects a browser autocomplete username and presses enter, it still moves to the next field instead of selecting it. Didn't have time to debug this, but if someone can figure out how to fix it, that would be cool.

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
} 

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>

function CurrentExample() {
    return (
        <form onSubmit={(event) => {event.preventDefault(); console.log("form submit")}}>
            <input type="text"/>

            <button onClick={() => console.log("button click")}>Click</button>
        </form>
    )
}

const root = document.querySelector("#root");
ReactDOM.render(<CurrentExample/>, root);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"/>

event.preventDefault();

<input type="submit" hidden />