How to submit a form when pressing Enter in a textarea

Question

How do I get the form submitted by pressing enter in the <textarea> instead of pressing the <input type="submit"> button?

<HTML>
    <BODY>
        <FORM ACTION="MyInserts.php"  METHOD="GET">
            firstname:  <TEXTAREA NAME="firstbox"></TEXTAREA><BR>
            <INPUT TYPE="submit" Value="send">
        </FORM>
</HTML>

You need to learn magic tricks to accomplish that..AND BTW USE lowercase FOR MARKUP, and `ENTER` will probably work here, you don't need to use any special javascript for that — Mr. Alien, Feb 05 '13 at 15:42
What are you talking about? do you have some code to give this question context? — Tom Walters, Feb 05 '13 at 15:42
Welcome to SO, you really need to improve this question. Have a look at the faq http://stackoverflow.com/faq . — piddl0r, Feb 05 '13 at 15:42
You mean **Press** Enter instead of **Clicking** on a "Send Button" ? — Ali Bassam, Feb 05 '13 at 15:42
Are you actually using PHP or did you just tag it with that? Just curious. — War10ck, Feb 05 '13 at 15:46
and btw you are using camel case for naming pages, just if you don't know, page names on linux are case sensitive — Mr. Alien, Feb 05 '13 at 15:48
i just tagged it with that, i dont have to paste the entire code, this is like a shorten code — Kelvin Bala, Feb 05 '13 at 15:48
@Mr.Alien The names are actually Pascal case. Camel case would start with a lowercase letter and uppercase every word after that. Pascal is uppercase letter on every word including the first. — War10ck, Feb 05 '13 at 15:51

score 3 · Answer 1 · answered Feb 05 '13 at 16:14

3

If you want to submit a <form> whenever the user presses ENTER on a <textarea>, you should be assigning a onKeyDown event handler to it, and submit the form manually with javascript when you detect it was ENTER that was pressed:

<html>
    <head>
        <script>
        function pressed(e) {
            // Has the enter key been pressed?
            if ( (window.event ? event.keyCode : e.which) == 13) { 
                // If it has been so, manually submit the <form>
                document.forms[0].submit();
            }
        }
        </script>
    </head>
    <body>
        <form action="MyInserts.php">
        <textarea onkeydown="pressed(event)"></textarea>
        </form>
    </body>
</html>

See it working in this JSFiddle.

answered Feb 05 '13 at 16:14

Xavi López

27,550
11
97
161

1

@KelvinBala there's a button named `edit` below your question. If your comment was meant to tell us that this is the code you've got, please use it to edit it in. – Xavi López Feb 05 '13 at 16:30
2

@KelvinBala: and there's an XSS attack possible with your code, you should use [`htmlspecialchars`](http://php.net/htmlspecialchars) when printing `$_GET["ident"]` to avoid that. – Marcel Korpel Feb 05 '13 at 16:45
Sorry to comment on a four month old post, but could you explain `(window.event ? event.keyCode : e.which)` and what each part means? Why can't I just use `e.which`? – user1755043 Jul 04 '13 at 19:02
1

@user1755043 Some browsers (such as IE < 9) don't support `e.which`. And other browsers don't seem to support `window.event.keyCode`. See Tim Down's answer to [javascript event e.which?](http://stackoverflow.com/q/3050984/851811) for more context. – Xavi López Jul 04 '13 at 20:34

score 1 · Answer 2 · edited Mar 22 '23 at 10:23

If you are reading this question post-2020 like me and trying to use it with TypeScript, you probably know that TypeScript will tell you that e.keyCode or e.which is deprecated!

So instead you can use e.key which will give you the exact string of the key that is being pressed like it will give you Enter for pressing the enter button or it will give you ctrl for pressing the control btn, so hopefully you get the idea!

Also if you want to write a function to convert it to the old way of getting the key code you can use something like :

switch (theChar) {
    case "Backspace":
      return 8;
    case "Tab":
      return 9;
    case "Enter":
      return 13;
    case "Alt":
      return 18;
    case "Escape":
      return 27;
    case "Delete":
      return 127;
    case "Minus":
      return 45;
    case "Plus":
      return 43;
    case "Equal":
      return 61;
    case "Delete":
      return 127;
    case "BracketRight":
      return 93;
    case "BracketLeft":
      return 91;
    case "Backslash":
      return 92;
    case "Slash":
      return 47;
    case "Semicolon":
      return 59;
    case "Colon":
      return 58;
    case "Comma":
      return 44;
    case "Period":
      return 46;
    case "Space":
      return 32;
    case "Quote":
      return 34;
    case "Backquote":
      return 39;

    //there are also "Numpad....." variants

    case "Unidentified":
      alert("handle the 'Unidentified' if you want to!");
  }

There are many other possible character values here but, AFAIK, there are no Unicode code points for them, such as:

switch (theKey) {
    case "AltLeft":
    case "CapsLock":
    case "ControlRight":
    case "Fn":
    case "NumpadDecimal":
    ...

event.which may output some number for them, but it is not consistent across browsers/machines and they may overlap with other code points.

hb_ · Answer 3 · 2022-04-07T03:55:43.583

the simplest way to override the Enter key to submit from textarea now is to add an event listener to the textarea element and use event.key as @amdev suggested

document.getElementsByTagName('textarea')[0].addEventListener("keydown", function(event){
  if (event.key == 'Enter') {
    event.preventDefault();
    document.forms[0].submit();
  }
});

You'll also want to prevent the default key action or you will include the line return in the submitted data

How to submit a form when pressing Enter in a textarea

3 Answers3