Prevent Form Submission on Enter Key Press

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

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

Prevent form submission with enter key

Here is a modified version of my function. It does the following:

Prevents the enter key from working
on any element of the form other
than the textarea, button, submit.
The enter key now acts like a tab.
preventDefault(), stopPropagation() being invoked on the element is fine, but invoked on the form seems to stop the event from ever getting to the element.

So my workaround is to check the element type, if the type is not a textarea (enters permitted), or button/submit (enter = click) then we just tab to the next thing.

Invoking .next() on the element is not useful because the other elements might not be simple siblings, however since DOM pretty much garantees order when selecting so all is well.

function preventEnterSubmit(e) {
    if (e.which == 13) {
        var $targ = $(e.target);

        if (!$targ.is("textarea") && !$targ.is(":button,:submit")) {
            var focusNext = false;
            $(this).find(":input:visible:not([disabled],[readonly]), a").each(function(){
                if (this === e.target) {
                    focusNext = true;
                }
                else if (focusNext){
                    $(this).focus();
                    return false;
                }
            });

            return false;
        }
    }
}

Preventing form submission on Enter key press in Angular

I followed these two simple steps:

1) I added an attribute in my form tag.

(keydown.enter)="$event.preventDefault()"

2) Added (click) listener on the submit button

So the entire HTML code looks like:

<div class="container">
  <div class="row pt-5">
    <div class="col-md-12 col-lg-12 col-sm-12 bg-light">
      <form [formGroup]="editorForm" (keydown.enter)="$event.preventDefault()">
        <div class="form-group">
                    ...
        </div>
        <button class="btn btn-primary (click)="onSubmit()">Submit</button>
      </form>
    </div>
  </div>
</div>

The problem was that I was using click listener with the form tag itself along with keydown.enter.

Prevent form submission on Enter key press

if(characterCode == 13) {
    // returning false will prevent the event from bubbling up.
    return false; 
} else{
    return true;
}

Ok, so imagine you have the following textbox in a form:

<input id="scriptBox" type="text" onkeypress="return runScript(event)" />

In order to run some "user defined" script from this text box when the enter key is pressed, and not have it submit the form, here is some sample code. Please note that this function doesn't do any error checking and most likely will only work in IE. To do this right you need a more robust solution, but you will get the general idea.

function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}

returning the value of the function will alert the event handler not to bubble the event any further, and will prevent the keypress event from being handled further.

NOTE:

It's been pointed out that keyCode is now deprecated. The next best alternative which has also been deprecated.

Unfortunately the favored standard key, which is widely supported by modern browsers, has some dodgy behavior in IE and Edge. Anything older than IE11 would still need a polyfill.

Furthermore, while the deprecated warning is quite ominous about keyCode and which, removing those would represent a massive breaking change to untold numbers of legacy websites. For that reason, it is unlikely they are going anywhere anytime soon.

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