Submit textarea form without a submit button with Enter key press

Question

Background: I'm making a facebook wall-alike page, which will have many posts and you should be able to comment every post. So in this one page there are many forms (of course). And I only need to submit one of them.

So yes, I have found answers to this question , but none of them work, so asking here:

I got a form like this:

    <form enctype="text/plain" action="submitcomment.php" method="post" target="output_frame" id="comment<?php echo $prepare_data['post_id']; ?>">
    <textarea name="comment" id="comment" onkeypress="return submitViaEnter(event)" value="" autocomplete="off"></textarea>
    <input type="hidden" name="hiddenid" id="hiddenid" value="<?php echo $prepare_data['post_id']; ?>" />
    </form>

and my JavaScript function looks like this:

function submitViaEnter(evt) {
    evt = (evt) ? evt : event;
    var target = (evt.target) ? evt.target : evt.srcElement;
    var form = target.form;
    var charCode = (evt.charCode) ? evt.charCode : ((evt.which) ? evt.which : evt.keyCode);
    if (charCode == 13) {
        document.forms[this.form.id].submit();
        alert("sent!");
        return false;
    }
    return true;
}

If I use a textbox, it works, but when I use textarea, it is not working. Trying to press enter does nothing.

works fine in a [fiddle](http://jsfiddle.net/8ZAu2/). you should never be using the `charCode` property, see [this question](http://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion). — jbabey, Nov 15 '12 at 16:35
Maybe there's something wrong with the "document.forms[this.form.id].submit();" -part? Because it's not working for me at least :/ — Jussi Hietanen, Nov 15 '12 at 16:39
you can probably replace all of that with `target.form.submit()`, btw — jbabey, Nov 15 '12 at 16:40
you should accept one of the answers. if none of them helped, post your own answer with what you did to fix it and accept your own answer. — jbabey, Nov 15 '12 at 18:25
Your comment fixed it, how can I apply it as an answer? :P Also I can't post my own answer in 8 hours as I don't have enough reputation ! — Jussi Hietanen, Nov 15 '12 at 18:59
i've posted my comments in an answer, feel free to accept it if it helps. — jbabey, Nov 15 '12 at 19:23

Jura Khrapunov · Answer 1 · 2012-11-15T17:24:36.727

1

Use jQuery and bind function to event via javascript:

$(function(){
    $('form > textarea').on('keyup', function(e){
        if (e.keyCode == 13) {
            // do whatever you want to do, for example submit form
            $(this).parent('form').trigger('submit');
        }
    });
});

Be careful with this though - it will submit on every new line. People tend to write multiline texts in textareas so this behavior could be unexpected

edited Nov 15 '12 at 17:24

answered Nov 15 '12 at 16:32

Jura Khrapunov

1,024
6
14

This sounds good. But every form ID is fifferent. How can I make jQuery know which one to submit? I'm total newbie with JavaScript/AJAX/jQuery... Just have done everything with PHP until now :) – Jussi Hietanen Nov 15 '12 at 16:37
You have to mark your forms/textareas with unique IDs anyway and you could do it with echoing something from PHP exactly as you did for the form's ID. I modified my code above to make it not bound to textareas ID but rather to the generic markup. Even better would be to assign certain class to all textareas and use it as a selector instead of 'form > textarea' to avoid overlapping with other forms which you don't want to enhance – Jura Khrapunov Nov 15 '12 at 17:27

score 0 · Accepted Answer · edited May 23 '17 at 12:27

0

This code flow works fine in a jsfiddle test. Note that you should not be using e.charCode, as e.keyCode (IE) and e.which (everything else) suffice. See this question.

Also, your code for finding the form is overly complex and not necessary, change this:

var form = target.form;
...
document.forms[this.form.id].submit();

To this:

target.form.submit();

edited May 23 '17 at 12:27

Community

1
1

answered Nov 15 '12 at 19:22

jbabey

45,965
12
71
94

So can we detect the combinations by this method? Such as Shift + Enter to add a new line similar to Facebook. – Sarvap Praharanayuthan Jul 24 '13 at 15:00
1

@SuryaS http://stackoverflow.com/questions/6014702/how-do-i-detect-shiftenter-and-generate-a-new-line-in-textarea – jbabey Jul 24 '13 at 16:39

score -2 · Answer 3 · answered Nov 15 '12 at 16:56

Have your textareas nested within your forms, as before, but give them classnames instead of id's. That way, the jquery can reference all textareas in the DOM with that particular classname.

<form name="form1" enctype="text/plain" action="submitcomment1.php" method="post" target="output_frame">
<textarea name="comment1" class="comment" value="" autocomplete="off"></textarea>
</form>
<form name="form2" enctype="text/plain" action="submitcomment2.php" method="post" target="output_frame">
<textarea name="comment2" class="comment" value="" autocomplete="off"></textarea>
</form>

Then, adjust Jura's code like so and it should refer to the correct form that the textfield is living in.

$(function(){

  $('.comment').on('keyup', function(e){

    if (e.keyCode == 13) {

      $(this).parent('form').trigger('submit');

    }
  });
});

Ouch, didn't notice your update to my code before rewriting it, fully endorsing your amendments though. +1 — Jura Khrapunov, Nov 15 '12 at 17:28

Submit textarea form without a submit button with Enter key press

3 Answers3