Avoid only form submission on Enter key press

Question

I've one form in that having some inputs as well as textarea like below.

<form id="my_form" action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
  <br>
  Note:<br>
  <textarea id="note" name="note"></textarea>
  <br>
  <input type="submit" value="Submit">
</form>

I've to disable form submission on pressing Enter key. Form should be submitted only on click of submit button.

I found this solution on stackoverflow, so I wrote below code.

$("#my_form").keypress( function( e ) {
    var code = e.keyCode || e.which;
    if ( code == 13 ) {
        e.preventDefault();
        return false;
    }
});

It's working fine but not allowing newline to be entered in the textarea on pressing Enter key. How do I achieve this?

So you want the form submit only if user click on Submit button correct? — Shailesh Rathod, Dec 24 '18 at 06:11
Yes. Form should be submitted only on click of submit button. — aagjalpankaj, Dec 24 '18 at 06:12
Possible duplicate of [Prevent users from submitting a form by hitting Enter](https://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter) — A. Meshu, Dec 24 '18 at 06:23
@A.Meshu - As I checked it's not possible duplicate because I have to avoid "only" form submission on Enter key press and do not have to block normal functionality of Enter key on that form. — aagjalpankaj, Dec 26 '18 at 04:36

score 2 · Answer 1 · answered Dec 24 '18 at 06:14

2

Easy, just change:

<input type="submit" value="Submit">

To:

<input type="button" value="Submit">

Then handle click of button in jQuery (or pure JS).

answered Dec 24 '18 at 06:14

Jay

353
4
8

score 2 · Accepted Answer · answered Dec 24 '18 at 06:17

2

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
}

answered Dec 24 '18 at 06:17

Shailesh Rathod

157
10

score 1 · Answer 3 · edited Dec 24 '18 at 09:30

This will work:

<html lang="en">
<head>
  <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<form id="my_form" action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" id="f">
  <br>
  Last name:<br>
  <input type="text" name="lastname" id="l">
  <br>
  Note:<br>
  <textarea id="note" name="note"></textarea>
  <br>
  <input type="submit" value="Submit">
</form>
<script>

  $("#note").keypress( function( e ) {
    var code = e.keyCode || e.which;
    if ( code == 13 ) {

      return true;
    }
  });
  $("#f").keypress( function( e ) {
    var code = e.keyCode || e.which;
    if ( code == 13 ) {
      e.preventDefault();
      return false;
    }

  });
  $("#l").keypress( function( e ) {
    var code = e.keyCode || e.which;
    if ( code == 13 ) {
      e.preventDefault();
      return false;
    }

  });

</script>
</body>
</html>

Give ids to first name and last name input. Disable keypress on them.

This is extremely inflexible. Every time you add a new input you have to add code to determine how to handle the enter? Better handled with a `data-` attribute if you want this sort of flexibility. — freedomn-m, Dec 24 '18 at 06:35

score 0 · Answer 4 · answered Dec 24 '18 at 06:13

0

You can use :not() Selector for input.

$("#my_form:not(input:text)").keypress( function( e ) {
    var code = e.keyCode || e.which;
    if ( code == 13 ) {
        e.preventDefault();
        return false;
    }
});

answered Dec 24 '18 at 06:13

4b0

21,981
30
95
142

Would `#my_form` ever be an `input:text`? As in your code would only work with this: `
`? – freedomn-m Dec 24 '18 at 06:33

score 0 · Answer 5 · answered Dec 24 '18 at 06:14

0

Just replace the $("#my_form") to $("#my_form input:text").

So code will looks like,

$("#my_form input:text").keypress( function( e ) {
    //Do stuff here
});

answered Dec 24 '18 at 06:14

Jitendra G2

1,196
7
14

Avoid only form submission on Enter key press

5 Answers5