提交textarea表单，而没有带有Enter键的提交按钮

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.

Answer 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

Answer 2

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

Answer 3

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');

    }
  });
});