Submit textarea form without a submit button with Enter key press

0
votes

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.

3
phpjavascriptformssubmitenter
works fine in a fiddle. you should never be using the charCode property, see this question. - jbabey
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
you can probably replace all of that with target.form.submit(), btw - jbabey
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
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

3 Answers

1
votes

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

0
votes

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

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

    }
  });
});